Forums

Home » Alloy UI » English

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Klaus Schnaithmann
Additional close button in dialog
September 1, 2011 4:27 AM
Answer

Klaus Schnaithmann

Rank: New Member

Posts: 4

Join Date: August 4, 2011

Recent Posts

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
John Croft
RE: Additional close button in dialog
September 2, 2011 9:51 AM
Answer

John Croft

Rank: New Member

Posts: 11

Join Date: February 15, 2010

Recent Posts

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
Klaus Schnaithmann
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

Recent Posts

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?
Rajeeva Lochana .B.R
RE: Additional close button in dialog
April 7, 2012 1:11 AM
Answer

Rajeeva Lochana .B.R

Rank: Junior Member

Posts: 58

Join Date: January 4, 2010

Recent Posts

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
Vicent Climent Savall
RE: Additional close button in dialog
April 16, 2012 5:52 AM
Answer

Vicent Climent Savall

Rank: New Member

Posts: 6

Join Date: January 27, 2012

Recent Posts

Nice trick.
Alain Dresse
RE: Additional close button in dialog
December 1, 2012 11:25 PM
Answer

Alain Dresse

Rank: Junior Member

Posts: 95

Join Date: July 18, 2011

Recent Posts

You can close an alloy dialog with the following button:
1<aui:button onClick="AUI().DialogManager.closeByChild(this);" type="button" value="cancel" />

Best regards,
Alain
Pawel Kruszewski
RE: Additional close button in dialog
July 15, 2014 9:37 AM
Answer

Pawel Kruszewski

Rank: New Member

Posts: 3

Join Date: April 9, 2009

Recent Posts

Hi All.

For all those that were looking for 6.2 solution, it's:
1
2<aui:button cssClass="close-panel" type="cancel" value="close" />


Best regards,
Pawel