Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-09-08T19:34:11.653Z
Answers.LastActivityDate: 2016-09-08T19:34:11.653Z
Answers.UserDisplayName: Marion Newlevant
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-18T17:07:05.457Z
Answers.LastActivityDate: 2017-09-18T17:07:05.457Z
Answers.UserDisplayName: andrew.welch
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-09-08T02:19:06.310Z
Comments.Text: 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...
Comments.UserDisplayName: Jeremy Daalder
Tags: <control-panel><garnish><modal>
Title: Javascript events when modal window is opened or closed
ThreadText: # 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...
  
  
  ---
  
  