<img alt="Liferay" height="36" src="http://cdn.www.liferay.com/osb-community-theme/images/custom/heading.png" />

Hi there,

I'm trying to add an additional close button to a dialog, but don't get it working. However, javascript is something new to me, and I'm probably doing a simple mistake....

My last try looks like this:

1<aui:script>
2
3function callPopup(){
4    AUI().ready('aui-dialog', function(A) {
5          var dialog = new A.Dialog({
6          title: 'dialog titele',
7          id: 'dialogId',
8          centered: true,
9          modal: true,
10          resizable: false,
11          width: 500,
12          height: 400,
13          draggable: false,
14          bodyContent: '<button type="button" onclick="dialogId.close()" value="close"></button>'
15          }).render();
16       });
17}
18
19callPopup();
20</aui:script>

This code is only executed in case the popup shall be shown, and showing the dialog works fine. However, closing it with the new button doesn't work. I think my problem is that I don't really know how to address the dialog in the onclick - or am I doing something completely wrong?

Thanks for your help,
Klaus

RE: Additional close button in dialog

September 2, 2011 9:51 AM

Answer

John Croft

Rank: New Member

Posts: 10

Join Date: February 15, 2010

First thing... It might be better to create a div that contains your dialog content and then hide it in a wrapper div that is set to display none...

To make your button work, add a buttons property to your list like so and create a function to do whatever you like...

1<aui:script>
2
3function callPopup(){
4    AUI().ready('aui-dialog', function(A) {
5    var dialogContentNode = A.one('#mydialog-content');
6    var dialog = new A.Dialog({
7          title: 'dialog titele',
8          id: 'dialogId',
9          centered: true,
10          modal: true,
11          resizable: false,
12          width: 500,
13          height: 400,
14          draggable: false,
15          bodyContent: dialogContentNode,
16       buttons:[
17          {text:'OK',handler:function() {
18             this.close();
19             }
20          }
21    ]
22          }).render();
23       });
24}
25
26callPopup();
27</aui:script>
28
29<div style="display:none">
30 <div id='mydialog-content'>Click the button below</div>
31</div>

Klaus Schnaithmann:

Hi there,

I'm trying to add an additional close button to a dialog, but don't get it working. However, javascript is something new to me, and I'm probably doing a simple mistake....

My last try looks like this:

1<aui:script>
2
3function callPopup(){
4    AUI().ready('aui-dialog', function(A) {
5          var dialog = new A.Dialog({
6          title: 'dialog titele',
7          id: 'dialogId',
8          centered: true,
9          modal: true,
10          resizable: false,
11          width: 500,
12          height: 400,
13          draggable: false,
14          bodyContent: '<button type="button" onclick="dialogId.close()" value="close"></button>'
15          }).render();
16       });
17}
18
19callPopup();
20</aui:script>

This code is only executed in case the popup shall be shown, and showing the dialog works fine. However, closing it with the new button doesn't work. I think my problem is that I don't really know how to address the dialog in the onclick - or am I doing something completely wrong?

Thanks for your help,
Klaus

Mark as an Answer

RE: Additional close button in dialog

September 6, 2011 4:42 AM

Answer

Klaus Schnaithmann

Rank: New Member

Posts: 4

Join Date: August 4, 2011

Thanks for your help!

This way it is possible to add a button in the footer panel - and it works! :-)
However I have still two problems:
1.) I tried to add a css Class to the button, however, it doesn't show up in the html source code (whereas changes of the text -which I actually don't need- are reflected immediately, and adding a cssClass to the dialog also works fine).

1AUI().ready('aui-dialog', function(A) {
2 var dialog = new A.Dialog({
3       title: 'dialog titele',
4       id: 'dialogId',
5       draggable: false,
6       cssClass: 'dialog'
7       bodyContent: dialogContentNode,
8       buttons: [
9          {
10             cssClass: 'button_close',
11             text: 'text',
12             handler: function() {
13                   dialog.close();
14             }
15          }
16       ]
17          }).render();
18       });

2.) This solution only allows to put the button in the footer of the dialog. Is there a way allowing flexible positioning of the button within the jsp?

Mark as an Answer

RE: Additional close button in dialog

April 7, 2012 1:11 AM

Answer

Rajeeva Lochana .B.R

Rank: Junior Member

Posts: 52

Join Date: January 4, 2010

Hi Klaus Schnaithmann,

2.) This solution only allows to put the button in the footer of the dialog. Is there a way allowing flexible positioning of the button within the jsp?

Yes,it is possible to achieve this functionality by using the below code.

1
2<script>
3function closeAuiPopUp(){
4 top.document.getElementById('closethick').click();
5}
6</script>
7
8<input type="button" name="close PopUp window" onClick="javascript:closeAuiPopUp();"/>

let me know if u have any query.

Thanks and Regards,
Rajeeva Lochana.B.R