jQuery UI Dialog - halt close event

Question

Is there a way to stop a close event for a jQuery UI Dialog?

I have a dialog modal with a form. When the user closes the dialog, I'd like to prompt "Continue without saving changes?" [Yes] [No]. The [Yes] button continues and closes the dialog as expected. The [No] button will stop the close event and keep the dialog open.

Is this possible?

Answer 1

Yes, you can use the beforeClose option. From the docs:

This event is triggered when a dialog attempts to close. If the beforeClose event handler (callback function) returns false, the close will be prevented.

Code examples

Supply a callback function to handle the beforeClose event as an init option.

$( ".selector" ).dialog({
   beforeClose: function(event, ui) { ... }
});

Answer 2

Justin answer works fine to show the modal. If you want to cancel the closing, your function should return false, like that:

$( ".selector" ).dialog({
   beforeClose: function(event, ui) 
    { return check_if_unsaved_changes(..); }
});

check_if_unsaved_changes should return true if the dialog should close and false if it should not close.