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';