feat: modal:initialized callback + preload param + $.modal.get method. Fixes #279

README.md

@@ -172,6 +172,10 @@ _(Note that modals loaded with AJAX are removed from the DOM when closed)._
 * Use `$.modal.isActive()` to check if a modal is currently being displayed.
 * Use `$.modal.getCurrent()` to retrieve a reference to the currently active modal instance, if any.
 
+# Getting a modal instance
+
+* Use `$.modal.get($elm)` to a modal instance.
+
 # Options
 
 These are the supported options and their default values:
@@ -192,7 +196,8 @@ $.modal.defaults = {
 
   showSpinner: true,      // Enable/disable the default spinner during AJAX requests.
   fadeDuration: null,     // Number of milliseconds the fade transition takes (null means no transition)
-  fadeDelay: 1.0          // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
+  fadeDelay: 1.0,         // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
+  preload: false          // Preload the modal on init, without displaying it
 };
 ```
 
@@ -201,6 +206,7 @@ $.modal.defaults = {
 The following events are triggered on the modal element at various points in the open/close cycle (see below for AJAX events).
 
 ```javascript
+$.modal.INITIALIZED = 'modal:initialized';      // Fires when the modal content has been loaded.
 $.modal.BEFORE_BLOCK = 'modal:before-block';    // Fires just before the overlay (blocker) appears.
 $.modal.BLOCK = 'modal:block';                  // Fires after the overlay (block) is visible.
 $.modal.BEFORE_OPEN = 'modal:before-open';      // Fires just before the modal opens.

examples/index.html

@@ -534,6 +534,30 @@ <h2 id="example-8"><a href="#example-8">#</a> Example 8: Custom Class for Close
   <p>This modal has a fancy-shmancy close button.</p>
 </div>
 
+<hr />
+
+<h2 id="example-9"><a href="#example-9">#</a> Example 9: Preload and display later</h2>
+<ol>
+  <li>Preload the modal once</li>
+  <li>Open it with <code>.open()</code> when you need to.</li>
+</ol>
+<pre><code>// Preload the modal
+  $('#preloaded-data').modal({
+    preload: true
+  });
+
+  // Open the modal when needed
+  $('#button').on('click', () => {
+    $.modal.get($('#preloaded-data')).open();
+  });
+</code></pre>
+
+<a class="btn" id="example-9-trigger" href="">Open Modal</a>
+
+<div class="modal" id="example-9-modal">
+  <p>I was loaded <span class="loaded-since"></span> seconds ago.</p>
+</div>
+
 <style type="text/css">
   .modal a.close-modal[class*="icon-"] {
     top: -10px;
@@ -564,6 +588,7 @@ <h2 id="example-8"><a href="#example-8">#</a> Example 8: Custom Class for Close
       if(typeof console != 'undefined' && console.log) console.log("[event] " + event.type);
     };
 
+    $(document).on($.modal.INITIALIZED, log_modal_event);
     $(document).on($.modal.BEFORE_BLOCK, log_modal_event);
     $(document).on($.modal.BLOCK, log_modal_event);
     $(document).on($.modal.BEFORE_OPEN, log_modal_event);
@@ -575,6 +600,8 @@ <h2 id="example-8"><a href="#example-8">#</a> Example 8: Custom Class for Close
     $(document).on($.modal.AJAX_SUCCESS, log_modal_event);
     $(document).on($.modal.AJAX_COMPLETE, log_modal_event);
 
+
+
     $('#more').click(function() {
       $(this).parent().after($(this).parent().next().clone());
       return false;
@@ -635,6 +662,28 @@ <h2 id="example-8"><a href="#example-8">#</a> Example 8: Custom Class for Close
       });
     });
 
+
+
+    $(document).on($.modal.INITIALIZED, function(_, ctx){
+      if(ctx.elm.find('.loaded-since').length){
+        // Count down seconds since init
+        const span = ctx.elm.find('.loaded-since');
+        let seconds = 0;
+        setInterval(function(){
+          seconds++;
+          span.text(seconds);
+        }, 1000);
+      }
+    });
+
+    $('#example-9-modal').modal({
+      preload: true
+    });
+
+    $('#example-9-trigger').on('click', function(e){
+      e.preventDefault();
+      $.modal.get($('#example-9-modal')).open();
+    });
   });
 </script>
 

jquery.modal.js

@@ -47,26 +47,28 @@
         this.$elm = $(target);
         if (this.$elm.length !== 1) return null;
         this.$body.append(this.$elm);
-        this.open();
+        el.trigger($.modal.INITIALIZED, [this._ctx()]);
+        if(!this.options.preload) this.open();
       //AJAX
       } else {
         this.$elm = $('<div>');
         this.$body.append(this.$elm);
         remove = function(event, modal) { modal.elm.remove(); };
-        this.showSpinner();
+        if(!this.options.preload) this.showSpinner();
         el.trigger($.modal.AJAX_SEND);
         $.get(target).done(function(html) {
           if (!$.modal.isActive()) return;
           el.trigger($.modal.AJAX_SUCCESS);
           var current = getCurrent();
           current.$elm.empty().append(html).on($.modal.CLOSE, remove);
-          current.hideSpinner();
-          current.open();
+          el.trigger($.modal.INITIALIZED, [this._ctx()]);
+          if(!this.options.preload) current.hideSpinner();
+          if(!this.options.preload) current.open();
           el.trigger($.modal.AJAX_COMPLETE);
         }).fail(function() {
           el.trigger($.modal.AJAX_FAIL);
           var current = getCurrent();
-          current.hideSpinner();
+          if(!this.options.preload) current.hideSpinner();
           modals.pop(); // remove expected modal from the list
           el.trigger($.modal.AJAX_COMPLETE);
         });
@@ -75,7 +77,8 @@
       this.$elm = el;
       this.anchor = el;
       this.$body.append(this.$elm);
-      this.open();
+      el.trigger($.modal.INITIALIZED, [this._ctx()]);
+      if(!this.options.preload) this.open();
     }
   };
 
@@ -105,7 +108,10 @@
     },
 
     close: function() {
-      modals.pop();
+      // Don't pop preloaded modals
+      if(modals.length && !modals[modals.length - 1]._ctx().options.preload){
+        modals.pop();
+      }
       this.unblock();
       this.hide();
       if (!$.modal.isActive())
@@ -186,16 +192,25 @@
   };
 
   $.modal.close = function(event) {
-    if (!$.modal.isActive()) return;
     if (event) event.preventDefault();
     var current = getCurrent();
+    if(!current) return;
     current.close();
     return current.$elm;
   };
 
   // Returns if there currently is an active modal
   $.modal.isActive = function () {
-    return modals.length > 0;
+    return modals.filter(function(m){
+      return !m._ctx().options.preload;
+    }).length > 0;
+  };
+
+  // Get modal instance from DOM element
+  $.modal.get = function (el) {
+    return modals.find(function(m){
+      return m._ctx().elm.is(el);
+    });
   };
 
   $.modal.getCurrent = getCurrent;
@@ -212,10 +227,12 @@
     showSpinner: true,
     showClose: true,
     fadeDuration: null,   // Number of milliseconds the fade animation takes.
-    fadeDelay: 1.0        // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
+    fadeDelay: 1.0,       // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
+    preload: false        // Preload the modal on init, without displaying it
   };
 
   // Event constants
+  $.modal.INITIALIZED = 'modal:initialized';
   $.modal.BEFORE_BLOCK = 'modal:before-block';
   $.modal.BLOCK = 'modal:block';
   $.modal.BEFORE_OPEN = 'modal:before-open';