diff --git a/bootstrap-1.1.1.css b/bootstrap-1.1.1.css index 8b95d5b1c1..92e141119d 100644 --- a/bootstrap-1.1.1.css +++ b/bootstrap-1.1.1.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 Aug 27 16:19:56 PDT 2011 + * Date: Sat Aug 27 18:02:38 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). @@ -1893,11 +1893,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .popover .content p, .popover .content ul, .popover .content ol { margin-bottom: 0; } -.modal-backdrop, -.modal, -.twipsy, -.popover, -.alert-message { +.fade { -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -ms-transition: opacity 0.15s linear; @@ -1905,10 +1901,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { transition: opacity 0.15s linear; opacity: 0; } -.modal-backdrop.show, -.modal.show, -.twipsy.show, -.popover.show, -.alert-message.show { +.fade.in { opacity: 1; } diff --git a/bootstrap-1.1.1.min.css b/bootstrap-1.1.1.min.css index 4c4673a173..36c7b6c121 100644 --- a/bootstrap-1.1.1.min.css +++ b/bootstrap-1.1.1.min.css @@ -246,4 +246,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .popover .inner{background-color:#333;background-color:rgba(0, 0, 0, 0.8);*background-color:#333;padding:3px;overflow:hidden;width:280px;-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);} .popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;} .popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} -.modal-backdrop,.modal,.twipsy,.popover,.alert-message{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.modal-backdrop.show,.modal.show,.twipsy.show,.popover.show,.alert-message.show{opacity:1;} +.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} diff --git a/examples/assets/js/bootstrap-alerts.js b/examples/assets/js/bootstrap-alerts.js index d1983d9f7f..f6a5f97114 100644 --- a/examples/assets/js/bootstrap-alerts.js +++ b/examples/assets/js/bootstrap-alerts.js @@ -51,11 +51,11 @@ that.$element = null } - $.support.transition ? + $.support.transition && this.$element.hasClass('fade') ? this.$element.bind(transitionEnd, removeElement) : removeElement() - this.$element.removeClass('show') + this.$element.removeClass('in') } } diff --git a/examples/assets/js/bootstrap-modal.js b/examples/assets/js/bootstrap-modal.js index 0b13fdf582..8e782a37e7 100644 --- a/examples/assets/js/bootstrap-modal.js +++ b/examples/assets/js/bootstrap-modal.js @@ -55,17 +55,19 @@ var that = this this.isOpen = true + this.$element = $(this.settings.content) + _.escape.call(this) _.backdrop.call(this) - this.$element = $(this.settings.content) + this.$element .delegate('.close', 'click', function (e) { e.preventDefault(); that.close() }) .appendTo(document.body) .show() setTimeout(function () { - that.$element.addClass('show') - that.$backdrop && that.$backdrop.addClass('show') + that.$element.addClass('in') + that.$backdrop && that.$backdrop.addClass('in') }, 1) return this @@ -79,14 +81,14 @@ _.escape.call(this) _.backdrop.call(this) - this.$element.removeClass('show') + this.$element.removeClass('in') function removeElement () { that.$element.remove() that.$element = null } - $.support.transition ? + $.support.transition && this.$element.hasClass('fade') ? this.$element.bind(transitionEnd, removeElement) : removeElement() @@ -103,19 +105,20 @@ backdrop: function () { var that = this + , animate = this.$element.hasClass('fade') ? 'fade' : '' if ( this.isOpen && this.settings.backdrop ) { - this.$backdrop = $('
') + this.$backdrop = $('
') .click(function () { that.close() }) .appendTo(document.body) } else if ( !this.isOpen && this.$backdrop ) { - this.$backdrop.removeClass('show') + this.$backdrop.removeClass('in') function removeElement() { that.$backdrop.remove() that.$backdrop = null } - $.support.transition ? + $.support.transition && this.$element.hasClass('fade')? this.$backdrop.bind(transitionEnd, removeElement) : removeElement() } diff --git a/examples/assets/js/bootstrap-twipsy.js b/examples/assets/js/bootstrap-twipsy.js index 4047f910d6..2d17796e13 100644 --- a/examples/assets/js/bootstrap-twipsy.js +++ b/examples/assets/js/bootstrap-twipsy.js @@ -54,6 +54,11 @@ if (this.getTitle() && this.enabled) { $tip = this.tip() this.setContent() + + if (this.options.animate) { + $tip.addClass('fade') + } + $tip .remove() .css({ top: 0, left: 0, display: 'block' }) @@ -86,7 +91,7 @@ $tip .css(tp) .addClass(placement) - .addClass('show') + .addClass('in') } } @@ -100,13 +105,13 @@ var that = this , $tip = this.tip() - $tip.removeClass('show') + $tip.removeClass('in') function removeElement () { $tip.remove() } - $.support.transition ? + $.support.transition && this.$tip.hasClass('fade') ? $tip.bind(transitionEnd, removeElement) : removeElement() } @@ -264,7 +269,8 @@ $.fn.twipsy.Twipsy = Twipsy $.fn.twipsy.defaults = { - delayIn: 0 + animate: true + , delayIn: 0 , delayOut: 0 , fallback: '' , placement: 'above' diff --git a/examples/bootstrap-js.html b/examples/bootstrap-js.html index c8d5db647e..3e9f39e63c 100644 --- a/examples/bootstrap-js.html +++ b/examples/bootstrap-js.html @@ -95,7 +95,7 @@

Methods

$().modal

-

Returns an instance of the modal class. Accepts an optional options object.

+

Returns an instance of the modal class. Accepts an optional options object. If you want your modal to fade in and out, just add a .fade class to your .modal element (refer to the demo to see this in action).

 $('#modal-content').modal({
   closeOnEscape: true
@@ -112,7 +112,7 @@ $('#modal-content').modal({
           
Demo

 
           
-