SimpleModal confirm before closing dialog

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. :)

Judaea

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

Sikkim

Thanks for pointing that out for me Doug :) Looking more into it I've been able to tweak the code to accomplish what it is that I wanted – Judaea

@Zoic Ya, you probably can edit their plugin, but then any upgrades you always have to reapply your changes. Glad you got it working! If this answer helped you out, be sure to mark it accepted. – Sikkim

in at least ff38.0.5 it is case sensitive, beforeClose, otherwise this worked for me, thanks – Corum

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.

Leucine

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.

Germano