How can I detect when a modal window has been opened or closed?

I am writing a plugin which wants to detect when a garnish elementeditor modal window has been opened or closed.

  • This would be very helpful for some Commerce UI stuff as well...was trying to do this the other day and hit a bit of a wall with it. Ideally all the modals would be detectable and have a unique class name... Sep 8, 2016 at 2:19

2 Answers 2


This is what I ended up doing:


There is a Garnish.Modal.visibleModal that will contain the handle to the Garnish modal object if one is visible. You can use this to see if a modal is visible, and even see which one.

Unfortunately there's no event I'm aware of that triggers when a modal is shown, so you'll still have to poll via window.setTimeout() -- it's a hack, but...


It looks as if there is no clean way to do this. The solution I am using to detect a new modal is

  • detect double click on the element
  • wait a second until the modal has opened
  • find the modal which is actually open

Like this:

$('body').on('dblclick', 'div.element.small', function() {
  window.setTimeout(function(event) {
    // get our modal (there may be several, only one is displayed)
    var $modalContainer = $('div.hud[style*="display: block;"]');
    if ($modalContainer.length) {
      // we have a new modal, do our thing
  }, 1000);

To detect a modal closing:

  • use window.setInterval for polling (I needed that anyway)
  • check whether the modal container is still display: block. (I have hold of something in the container, and so I look outward from there.)
  • if not, the modal has closed

Like this:

if (! $somethingInTheModal.closest('div.hud[style*="display: block;"]').length) {
  // our modal is closed

By no means ideal, but it seems to be working at the moment for me.

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.