jQuery Dialog UI can't detect if close icon is clicked

I have a dialog modal box using jQuery's Dialog UI plugin. I'm trying to detect if the user closed the box using the 'X' button in the upper-right corner of the titlebar but have had no luck. I've tried:

开发者_C百科$('.myModal').dialog({
    title: 'dialog 1',
    beforeClose: function(){
        //do something
    }
}).dialog("open");

This will execute the function regardless of user action. i.e. if the user clicks "OK" instead of the 'X' button.

I've looked through the dialog documentation and can't find an event, method, or option that gives me the results I'm looking for. Any ideas would be much appreciated.

Check out this link...

http://forum.jquery.com/topic/jquery-dialog-close

The fourth reply down is the one you are looking for, and more less he references this link.

http://jsbin.com/obafo

... where he has setup an example to view, which has this code ...

$("#dialog").dialog({

close: function(event, ui) {

    if ( event.originalEvent && 
                $(event.originalEvent.target).closest(".ui-dialog-titlebar-close").length ) {

        $("body").append("do some  stuff<br>");

    }

}

})
.find("button")
.click(function() {

    $("body").append("just close  dialog<br>");

    $(this).closest(".ui-dialog-content").dialog("close");

});

You need to include the two optional arguments for the beforeClose callback function.

$('.myModal').dialog({title: 'dialog 1'
                  beforeClose: function(event,ui){ //do something }}).dialog("open");

You need to check the event and/or ui variables and figure out if the 'X' was pressed or not.

You could attach a handler to the click event of the close button:

$('.myModal')
    .dialog("widget")
    .find(".ui-dialog-titlebar-close").click(function() {

        // do whatever you want here

    });

This assumes you havn't changed the default close text which displays as an X but innertext is 'close'

$('#acceptsignaturediv').dialog({
             title: 'my Title',
             height: 400,
             width: 400,
             buttons: { "Accept": function () { alert('Accept'); },
                 "Decline": function () { alert('Decline'); }
             },
             beforeClose: function (event, ui) { if (event.originalEvent != undefined && event.originalEvent.srcElement.innerText == "close") { alert('You must accept or decline'); return false; } }
         });

I solved it by checking that the originalevent had an originalevent of type click. The condition is pretty long, but it works.

$('.myModal').dialog({
    title: 'dialog 1',
    beforeClose: function(){
        if (e.originalEvent && e.originalEvent.originalEvent && e.originalEvent.originalEvent.type == "click") {
            // do something
        }
    }
}).dialog("open");