rework the transitions for the modal a bit

diff --git a/bootstrap-1.3.0.css b/bootstrap-1.3.0.css
index ee57571fb75780aa6da3d1cfb43997bb217c9879..1c16d405abda56a8165784ebbd3543d9e73c2158 100644 (file)
--- a/bootstrap-1.3.0.css
+++ b/bootstrap-1.3.0.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sat Sep 10 15:29:50 PDT 2011
+ * Date: Sat Sep 10 18:12:41 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here      that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -1977,10 +1977,10 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   opacity: 0;
 }
 .modal-backdrop, .modal-backdrop.fade.in {
-  filter: alpha(opacity=50);
-  -khtml-opacity: 0.5;
-  -moz-opacity: 0.5;
-  opacity: 0.5;
+  filter: alpha(opacity=70);
+  -khtml-opacity: 0.7;
+  -moz-opacity: 0.7;
+  opacity: 0.7;
 }
 .modal {
   position: fixed;
@@ -2008,6 +2008,17 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .modal .close {
   margin-top: 7px;
 }
+.modal.fade {
+  -webkit-transition: opacity .25s linear, top .25s ease-out;
+  -moz-transition: opacity .25s linear, top .25s ease-out;
+  -ms-transition: opacity .25s linear, top .25s ease-out;
+  -o-transition: opacity .25s linear, top .25s ease-out;
+  transition: opacity .25s linear, top .25s ease-out;
+  top: -50%;
+}
+.modal.fade.in {
+  top: 50%;
+}
 .modal-header {
   border-bottom: 1px solid #eee;
   padding: 5px 15px;

diff --git a/bootstrap-1.3.0.min.css b/bootstrap-1.3.0.min.css
index 873268391f95074e7656da9e9c0f23e1c809523f..c698e0cba17c98a09593cc731af88df34cf772fa 100644 (file)
--- a/bootstrap-1.3.0.min.css
+++ b/bootstrap-1.3.0.min.css
@@ -274,8 +274,10 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .pagination .next a{border:0;}
 .well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}
 .modal-backdrop{background-color:#000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;}.modal-backdrop.fade{opacity:0;}
-.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
+.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=70);-khtml-opacity:0.7;-moz-opacity:0.7;opacity:0.7;}
 .modal{position:fixed;top:50%;left:50%;z-index:2000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
+.modal.fade{-webkit-transition:opacity .25s linear, top .25s ease-out;-moz-transition:opacity .25s linear, top .25s ease-out;-ms-transition:opacity .25s linear, top .25s ease-out;-o-transition:opacity .25s linear, top .25s ease-out;transition:opacity .25s linear, top .25s ease-out;top:-50%;}
+.modal.fade.in{top:50%;}
 .modal-header{border-bottom:1px solid #eee;padding:5px 15px;}
 .modal-body{padding:15px;}
 .modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;text-align:right;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;*display:inline;}

diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index de972a8aa14ce2f0c6f4103c63497feeb238a0ac..81f265710ddf09f2e6ba5620e497a451b02024a9 100644 (file)
--- a/js/bootstrap-modal.js
+++ b/js/bootstrap-modal.js
@@ -59,16 +59,17 @@
       this.isShown = true
 
       _.escape.call(this)
-      _.backdrop.call(this)
+      _.backdrop.call(this, function () {
 
-      this.$element
-        .appendTo(document.body)
-        .show()
+        that.$element
+          .appendTo(document.body)
+          .show()
 
-      setTimeout(function () {
-        that.$element.addClass('in').trigger('modal:shown')
-        that.$backdrop && that.$backdrop.addClass('in')
-      }, 1)
+        setTimeout(function () {
+          that.$element.addClass('in').trigger('modal:shown')
+        }, 1)
+
+      })
 
       return this
     }
@@ -81,19 +82,19 @@
       this.isShown = false
 
       _.escape.call(this)
-      _.backdrop.call(this)
 
       this.$element.removeClass('in')
 
       function removeElement () {
+        _.backdrop.call(that)
+
         that.$element
-          .unbind(transitionEnd)
           .detach()
           .trigger('modal:hidden')
       }
 
       $.support.transition && this.$element.hasClass('fade') ?
-        this.$element.bind(transitionEnd, removeElement) :
+        this.$element.one(transitionEnd, removeElement) :
         removeElement()
 
       return this
@@ -107,13 +108,21 @@
 
   var _ = {
 
-    backdrop: function () {
+    backdrop: function ( callback ) {
       var that = this
         , animate = this.$element.hasClass('fade') ? 'fade' : ''
       if ( this.isShown && this.settings.backdrop ) {
         this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
           .click($.proxy(this.hide, this))
           .appendTo(document.body)
+
+        setTimeout(function () {
+          that.$backdrop && that.$backdrop.addClass('in')
+
+          $.support.transition && that.$backdrop.hasClass('fade')?
+            that.$backdrop.one(transitionEnd, callback) :
+            callback()
+        })
       } else if ( !this.isShown && this.$backdrop ) {
         this.$backdrop.removeClass('in')
 
@@ -123,7 +132,7 @@
         }
 
         $.support.transition && this.$element.hasClass('fade')?
-          this.$backdrop.bind(transitionEnd, removeElement) :
+          this.$backdrop.one(transitionEnd, removeElement) :
           removeElement()
       }
     }

diff --git a/lib/patterns.less b/lib/patterns.less
index 53ad3f991d57396b2c5dfad9da0841d937740a5d..65b16ce05781c0942d69bf7f48853f60ef2e9a64 100644 (file)
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -725,9 +725,7 @@ input[type=submit].btn {
 
 .modal-backdrop {
   background-color:#000;
-  &.fade {
-    opacity: 0;
-  }
+  &.fade { opacity: 0; }
   position: fixed;
   top: 0;
   left: 0;
@@ -737,7 +735,7 @@ input[type=submit].btn {
 }
 
 .modal-backdrop, .modal-backdrop.fade.in {
-  .opacity(50);
+  .opacity(70);
 }
 
 .modal {
@@ -754,9 +752,12 @@ input[type=submit].btn {
   .border-radius(6px);
   .box-shadow(0 3px 7px rgba(0,0,0,0.3));
   .background-clip(padding-box);
-  .close {
-    margin-top: 7px;
+  .close { margin-top: 7px; }
+  &.fade {
+    .transition(e('opacity .25s linear, top .25s ease-out'));
+    top:-50%;
   }
+  &.fade.in { top: 50%;}
 }
 .modal-header {
   border-bottom: 1px solid #eee;