Added fadeDelay option

examples/index.html

@@ -203,14 +203,32 @@ <h2>Example 6: Multiple Modals</h2>
 
 <hr />
 
-<h2>Example 7: Fading</h2>
+<h2>Example 7: Fade Transitions</h2>
 
 <p>This <a href="#ex7">example</a> shows how you can do a simple fade by specifying the <code>fadeDuration</code> option.</p>
 
 <pre><code> $("#fade").modal({
  fadeDuration: 100
 });</code></pre>
 
+<p>You can also use <code>fadeDelay</code> to control the point during the overlay's fade in at which the modal fades in. For <a href="#ex8">example</a>, to fade in the modal when the overlay transition is 50% complete:</p>
+
+<pre><code> $("#fade").modal({
+ fadeDuration: 1000,
+ fadeDelay: 0.50
+});</code></pre>
+
+<p>The default value is <code>1.0</code>, meaning the window transition begins once the overlay transition has finished. Values greater than <code>1.0</code> mean there is a delay between the completed overlay transition and the start of the window transition, <a href="#ex9">example</a>:</p>
+
+<pre><code> $("#fade").modal({
+ fadeDuration: 1000,
+ fadeDelay: 1.75 // Will fade in 750ms after the overlay finishes.
+});</code></pre>
+
+<p><small>Tip: set <code>fadeDelay: 0</code> to have the overlay and window fade in simultaneously.</small></p>
+
+<p>In the spirit of keeping this library small, fading is the only supported transition. When the modal is closed, both the overal and window transition out simultaneously.</p>
+
 <div id="ex7" class="modal">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -220,6 +238,14 @@ <h2>Example 7: Fading</h2>
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 </div>
 
+<div id="ex8" class="modal">
+ <p>This modal starts fading in once the overlay is 50% faded in.</p>
+</div>
+
+<div id="ex9" class="modal">
+ <p>This modal starts fading in well after the overlay has finished transitioning.</p>
+</div>
+
 <script type="text/javascript" charset="utf-8">
  $(function() {
 
@@ -262,7 +288,23 @@ <h2>Example 7: Fading</h2>
  $('a[href="#ex7"]').click(function(event) {
  event.preventDefault();
  $(this).modal({
- fadeDuration: 100
+ fadeDuration: 250
+ });
+ });
+
+ $('a[href="#ex8"]').click(function(event) {
+ event.preventDefault();
+ $(this).modal({
+ fadeDuration: 1000,
+ fadeDelay: 0.50
+ });
+ });
+
+ $('a[href="#ex9"]').click(function(event) {
+ event.preventDefault();
+ $(this).modal({
+ fadeDuration: 1000,
+ fadeDelay: 1.75
  });
  });
 

jquery.modal.js

@@ -49,8 +49,16 @@
  constructor: $.modal,
 
  open: function() {
- this.block();
- this.show();
+ var m = this;
+ if(this.options.doFade) {
+ this.block();
+ setTimeout(function() {
+ m.show();
+ }, this.options.fadeDuration * this.options.fadeDelay);
+ } else {
+ this.block();
+ this.show();
+ }
  if (this.options.escapeClose) {
  $(document).on('keydown.modal', function(event) {
  if (event.which == 27) $.modal.close();
@@ -76,10 +84,9 @@
  background: this.options.overlay,
  opacity: initialOpacity
  });
- console.log(initialOpacity);
  this.$body.append(this.blocker);
  if(this.options.doFade) {
- this.blocker.animate({opacity: this.options.opacity}, this.options.doFade);
+ this.blocker.animate({opacity: this.options.opacity}, this.options.fadeDuration);
  }
  this.$elm.trigger($.modal.BLOCK, [this._ctx()]);
  },
@@ -113,7 +120,7 @@
  hide: function() {
  this.$elm.trigger($.modal.BEFORE_CLOSE, [this._ctx()]);
  if (this.closeButton) this.closeButton.remove();
- this.$elm.removeClass('current')
+ this.$elm.removeClass('current');
 
  if(this.options.doFade) {
  this.$elm.fadeOut(this.options.fadeDuration);
@@ -180,7 +187,8 @@
  spinnerHtml: null,
  showSpinner: true,
  showClose: true,
- fadeDuration: null
+ 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.)
  };
 
  // Event constants