Additional close button in dialog

[Klaus Schnaithmann, modificado 12 Anos atrás.]

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, modificado 12 Anos atrás.]

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, modificado 12 Anos atrás.]

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?

[Rajeeva Lochana .B.R, modificado 12 Anos atrás.]

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, modificado 12 Anos atrás.]

Nice trick.

[Alain Dresse, modificado 11 Anos atrás.]

You can close an alloy dialog with the following button:

<aui:button onClick="AUI().DialogManager.closeByChild(this);" type="button" value="cancel" />

Best regards,
Alain

[Pawel Kruszewski, modificado 9 Anos atrás.]

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