SimpleModal在关闭对话框之前确认

Question

I'm using SimpleModal ( http://www.ericmmartin.com/projects/simplemodal/ ) and I have a form that displays in a dialog. What I want to do is be able to have a confirmation come up each time that the user tries to close the dialog (either by escape or clicking on the close icon) and asks them if they really want to close it without saving the form data. I tried the following:

onClose: function (dialog) {
    if (confirm('Are you sure you want to close without saving?')) {
        $.modal.close();
    }
}

But it only triggers once. If you hit cancel then fails to close again later, which kind of makes sense. Anybody have a suggestion or solution? Any help would be greatly appreciated. :)

Answer 1

I looked at the source of SimpleModal for you and what you are wanting to do can't be done with their code. This is why:

Just prior to calling your custom callback onClose it calls this:

s.unbindEvents();

Which effectively says "This box is going to close whether you like it or not". It is not like a normal callback which you can cancel.

I would recommend instead using the jQuery UI Dialog , which you should find super easy to implement that functionality by using their beforeclose callback. You would simply use:

beforeclose: function(){ 
    return confirm('Are you sure you want to close without saving?')
}

Answer 2

I got this working using sort of what jerone was trying but also rebinding the events:

onClose: function (dialog) {
    if (confirm('Are you sure you want to close without saving?')) {
        $.modal.close();
    }else{
        this.occb = false;
        this.bindEvents();
    }
}

This plugin needs to be updated to support the cancel of the close event. It looks like its not really being thought of as a event in the code. I would like it to behave just like any other js event.

Answer 3

I've also looked at the source and when the onclosed event is executed a occb flag is enabled.

What you can try (I haven't tried it) is to override this occb as it's passed to the this variable:

onClose: function (dialog) {
    if (confirm('Are you sure you want to close without saving?')) {
        $.modal.close();
    }else{
        this.occb = false;
    }
}

Hope this helps.