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:
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
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...
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).
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?
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, 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.
let me know if u have any query.
Thanks and Regards,
Rajeeva Lochana.B.R
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.
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:
Best regards,
Alain
<aui:button onClick="AUI().DialogManager.closeByChild(this);" type="button" value="cancel" />
Best regards,
Alain
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:
Best regards,
Pawel
For all those that were looking for 6.2 solution, it's:
<aui:button cssClass="close-panel" type="cancel" value="close" />
Best regards,
Pawel