close dialog by clicking button - JQuery UI

jquery, jquery-ui

Solution

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');
        }
    }
});

Problem

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(); } ```

Original source