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?

  • Let me add that listening via $(document). drupalOverlayBeforeClose(function() { alert('foo'); }) never fires. Commented Nov 1, 2012 at 13:26

2 Answers 2


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.

  • This helps a lot. I should have tried binding that sooner and not treated it like a shortcut. I'm still experiencing an issue where the event that is passed into the function doesn't seem to be the event that I want. For example, if I do $(document).bind('drupalOverlayBeforeClose', function(event) { event.preventDefault(); and then run if (event.isDefaultPrevented()) { alert('foo'); } in overlay-parent.js I see no 'foo'. Is the event being passed into function() the proper "event"? Commented Nov 1, 2012 at 17:40
  • Added the information about preventing the overlay from closing in the answer :) Commented Nov 1, 2012 at 17:51
  • return false; isn't doing it for me. overlay-parent.js is checking if (event.isDefaultPrevented()) { return false; } which is why I tried preventDefault(). Commented Nov 1, 2012 at 17:59
  • No need to try preventDefault(), just return false that's enough. Look at the comment before that line - If a handler returned false, the close will be prevented.. You're making the things more complicated :( Commented Nov 1, 2012 at 18:03
  • 1
    Is your .js file being called by your front-end theme, or the admin theme? Commented Nov 1, 2012 at 19:54

Try following code

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


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


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

enter image description here

  • Thanks Ajinkya. I'm trying to listen when the event is triggered (drupalOverlayBeforeClose) and have gotten it working thanks to you and mashemetician's code – the issue was with the scope of the event between the parent and the iframe. The issue I still have, however, is that if I press "cancel" the first time, the X never listens for subsequent clicks. Do you have that behavior when you use your code? Commented Nov 5, 2012 at 1:49
  • No that behavior does not happen with my code. I can still listen for subsequent clicks. Commented Nov 6, 2012 at 17:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.