How can I listen for drupalOverlayBeforeClose in custom jQuery?

Question

I am monitoring a particular form for changes and want to warn the user before they attempt to navigate away from the form without submitting it. I've successfully gotten this working in all instances except for the overlay close button – because that element is bound to the Drupal.overlay.close() function, a user is able to click it and immediately close the overlay, even though I'm listening for all $('a') clicks.

I looked inside of modules/overlay/overlay-parent.js and see that it provides the drupalOverlayBeforeClose event so that other scripts can respond and stop the overlay from closing if needed, but I can't figure out how to implement this. Do I just listen for this event globally, through the $(document) or something? Or do I need to extend the Drupal object and attach my function to this event somehow?

Answer 1

You need to use the following code,

jQuery(document).bind('drupalOverlayBeforeClose', function(event) {
   // your code
   return false // This will prevent the overlay from closing.
});

click, dbclick and other methods are shortcut methods for bind('click', function(){}), bind('dbclick', function(){}) respectively. However there is no shortcut method called drupalOverlayBeforeClose, that's why the following code didn't worked,

$(document).drupalOverlayBeforeClose(function(event) {

});

So you need to bind drupalOverlayBeforeClose explicitly using bind. If you return false in your callback, then the overlay won't be closed.

Hope this clarifies the answer.

Answer 2

Try following code

jQuery("#overlay-container").find("iframe").contents().find("#overlay-close").click(function (event) {
    console.log('Clicked on close overlay link');

    event.preventDefault();
    event.stopPropagation();

    var r = confirm("Do you want to close overlay?");
    if (r == true) {
        Drupal.overlay.close();
    } else {
        //do something else
    }


});

When user will click on close overlay link, a confirming dialog should display.