Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

close dialog by clicking button - JQuery UI

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?

enter image description here 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();
}
like image 965
roev Avatar asked Jul 23 '12 17:07

roev


People also ask

How to add close button in jQuery dialog?

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.

How do I close a dialog box in JavaScript?

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.

How Add Close button to div?

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.


1 Answers

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');
        }
    }
});
like image 128
bfavaretto Avatar answered Nov 07 '22 05:11

bfavaretto