Fórumok

Additional close button in dialog

Klaus Schnaithmann, módosítva 12 év-val korábban

Additional close button in dialog

New Member Bejegyzések: 4 Csatlakozás dátuma: 2011.08.04. Legújabb bejegyzések
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:
<aui:script>
 
function callPopup(){
     AUI().ready('aui-dialog', function(A) {
           var dialog = new A.Dialog({  
            title: 'dialog titele',
            id: 'dialogId',
            centered: true,
            modal: true,
            resizable: false,
            width: 500,
            height: 400,
            draggable: false,
            bodyContent: '<button type="button" onclick="dialogId.close()" value="close"></button>'
            }).render();
        });
}

callPopup();
</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, módosítva 12 év-val korábban

RE: Additional close button in dialog

New Member Bejegyzések: 11 Csatlakozás dátuma: 2010.02.15. Legújabb bejegyzések
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...

<aui:script>
 
function callPopup(){
     AUI().ready('aui-dialog', function(A) {
       var dialogContentNode = A.one('#mydialog-content');           
       var dialog = new A.Dialog({  
            title: 'dialog titele',
            id: 'dialogId',
            centered: true,
            modal: true,
            resizable: false,
            width: 500,
            height: 400,
            draggable: false,
            bodyContent: dialogContentNode,
	    buttons:[					
			{text:'OK',handler:function() {
				this.close();
			   }
			}
	   ]
            }).render();
        });
}

callPopup();
</aui:script>

<div style="display:none">
  <div id="mydialog-content">Click the button below</div>
</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:
<aui:script>
 
function callPopup(){
     AUI().ready('aui-dialog', function(A) {
           var dialog = new A.Dialog({  
            title: 'dialog titele',
            id: 'dialogId',
            centered: true,
            modal: true,
            resizable: false,
            width: 500,
            height: 400,
            draggable: false,
            bodyContent: '<button type="button" onclick="dialogId.close()" value="close"></button>'
            }).render();
        });
}

callPopup();
</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, módosítva 12 év-val korábban

RE: Additional close button in dialog

New Member Bejegyzések: 4 Csatlakozás dátuma: 2011.08.04. Legújabb bejegyzések
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).
AUI().ready('aui-dialog', function(A) {
	var dialog = new A.Dialog({ 
		title: 'dialog titele',
		id: 'dialogId',
		draggable: false,
		cssClass: 'dialog'
		bodyContent: dialogContentNode,
		buttons: [
			{
				cssClass: 'button_close',
				text: 'text',
				handler: function() {
					dialog.close();
				}
			}
		]
            }).render();
        });


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?
thumbnail
Rajeeva Lochana .B.R, módosítva 11 év-val korábban

RE: Additional close button in dialog

Junior Member Bejegyzések: 67 Csatlakozás dátuma: 2010.01.04. Legújabb bejegyzések
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.

<script>
function closeAuiPopUp(){
        top.document.getElementById('closethick').click();
}
</script>

<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, módosítva 11 év-val korábban

RE: Additional close button in dialog

New Member Bejegyzések: 6 Csatlakozás dátuma: 2012.01.27. Legújabb bejegyzések
Nice trick.
thumbnail
Alain Dresse, módosítva 11 év-val korábban

RE: Additional close button in dialog

Junior Member Bejegyzések: 95 Csatlakozás dátuma: 2011.07.18. Legújabb bejegyzések
You can close an alloy dialog with the following button:
<aui:button onClick="AUI().DialogManager.closeByChild(this);" type="button" value="cancel" />

Best regards,
Alain
thumbnail
Pawel Kruszewski, módosítva 9 év-val korábban

RE: Additional close button in dialog

New Member Bejegyzések: 3 Csatlakozás dátuma: 2009.04.09. Legújabb bejegyzések
Hi All.

For all those that were looking for 6.2 solution, it's:

<aui:button cssClass="close-panel" type="cancel" value="close" />


Best regards,
Pawel