掲示板
Additional close button in dialog
12年前 に Klaus Schnaithmann によって更新されました。
Additional close button in dialog
New Member 投稿: 4 参加年月日: 11/08/04 最新の投稿
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
12年前 に John Croft によって更新されました。
RE: Additional close button in dialog
New Member 投稿: 11 参加年月日: 10/02/15 最新の投稿
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
12年前 に Klaus Schnaithmann によって更新されました。
RE: Additional close button in dialog
New Member 投稿: 4 参加年月日: 11/08/04 最新の投稿
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?
12年前 に Rajeeva Lochana .B.R によって更新されました。
RE: Additional close button in dialog
Junior Member 投稿: 67 参加年月日: 10/01/04 最新の投稿
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
12年前 に Vicent Climent Savall によって更新されました。
RE: Additional close button in dialog
New Member 投稿: 6 参加年月日: 12/01/27 最新の投稿
Nice trick.
11年前 に Alain Dresse によって更新されました。
RE: Additional close button in dialog
Junior Member 投稿: 95 参加年月日: 11/07/18 最新の投稿
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
9年前 に Pawel Kruszewski によって更新されました。
RE: Additional close button in dialog
New Member 投稿: 3 参加年月日: 09/04/09 最新の投稿
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