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

<ul>
<li>detect double click on the element</li>
<li>wait a second until the modal has opened</li>
<li>find the modal which is actually open</li>
</ul>

<p>Like this:</p>

<pre><code>$('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);
});
</code></pre>

<p>To detect a modal closing:</p>

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

<p>Like this:</p>

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

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

CC BY-SA 3.0
2016-09-08T19:34:11.653Z
2016-09-08T19:34:11.653Z
Marion Newlevant
<p>This is what I ended up doing:</p>

<p><a href="https://github.com/nystudio107/disclosedassets/blob/master/resources/js/disclosedassets.js" rel="nofollow noreferrer">https://github.com/nystudio107/disclosedassets/blob/master/resources/js/disclosedassets.js</a></p>

<p>There is a <code>Garnish.Modal.visibleModal</code> 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.</p>

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

CC BY-SA 3.0
2017-09-18T17:07:05.457Z
2017-09-18T17:07:05.457Z
andrew.welch
<p>How can I detect when a modal window has been opened or closed?</p>

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

CC BY-SA 3.0
2016-09-08T02:19:06.310Z
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...
Jeremy Daalder
<control-panel><garnish><modal>
Javascript events when modal window is opened or closed
# Javascript events when modal window is opened or closed

(Asked by: username_0 on 2016-09-05)

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.

**Tags:** control-panel, garnish, modal
> **Comments:**
> **username_1**: 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...  

---

## 2 answers

### Answer by username_0 on 2016-09-08. Score: 1 | Accepted answer

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.


---

### Answer by username_2 on 2017-09-18. Score: 2

This is what I ended up doing:

<https://github.com/nystudio107/disclosedassets/blob/master/resources/js/disclosedassets.js>

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


---

