I try to create a button that closes "dialog" window in JQuery UI.
To open the dialog i'm using this code:
$(".show .edit_site").click(function (){
rel = $(this).attr("rel");
$("#dialog_edit").dialog({
modal: true,
open: function () {
$(this).load("<?= site_url()?>/sites/show_update?id="+rel+"&mode=popup");
},
close: function() {
//some code
},
height: 370,
width: 900,
title: 'Some title'
});
});
The dialog opened and everything is fine. But now the question is how do I close the dialog by clicking on the button that is inside the dialog?
Thank you all and sorry for my terrible English :)
I tried every possible solution, this the only one who works for me:
function close_dialog()
{
//Close jQuery UI dialog
$(".ui-dialog").hide();
$(".ui-widget-overlay").hide();
}
If you don't want a close button in the header or add a custom close button, you can use data-close-btn="none" . To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open and add the data-rel="back" attribute to your link.
Close Dialog when clicking outside of its region in JavaScript Dialog control. By default, dialog can be closed by pressing Esc key and clicking the close icon on the right of dialog header. It can also be closed by clicking outside of the dialog using hide method.
Add a close button using HTML, CSS, and JavaScriptCreate a button element in your creative using a <div> tag. Create the element in the HTML file and style it in the CSS file. Then assign the ID close-btn to your element.
It's simple, just add the button as part of the dialog's options:
$("#dialog_edit").dialog({
modal: true,
open: function () {
$(this).load("<?= site_url()?>/sites/show_update?id="+rel+"&mode=popup");
},
height: 370,
width: 900,
title: 'Some title',
buttons: {
'button text' : function() {
$(this).dialog('close');
}
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With