Skip to content

B
bootstrap
Commit ac800119 authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

force reflow instead of relying on eventloop (firefox) 

listen to window for escape press
parent ba6f4f03
Hide whitespace changes
Inline Side-by-side
Showing with 158 additions and 151 deletions
docs/javascript.html
View file @ ac800119
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<![endif]--> <![endif]-->
<!-- Le javascript --> <!-- Le javascript -->
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script>
<script>$(function () { prettyPrint() })</script> <script>$(function () { prettyPrint() })</script>
<script src="../js/bootstrap-modal.js"></script> <script src="../js/bootstrap-modal.js"></script>
......
js/bootstrap-modal.js
View file @ ac800119
...@@ -85,11 +85,13 @@ ...@@ -85,11 +85,13 @@
.appendTo(document.body) .appendTo(document.body)
.show() .show()
setTimeout(function () { if ($.support.transition && that.$element.hasClass('fade')) {
that.$element that.$backdrop[0].offsetWidth // force reflow
.addClass('in') }
.trigger('shown')
}, 0) that.$element
.addClass('in')
.trigger('shown')
}) })
return this return this
...@@ -132,6 +134,8 @@ ...@@ -132,6 +134,8 @@
var that = this var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : '' , animate = this.$element.hasClass('fade') ? 'fade' : ''
if ( this.isShown && this.settings.backdrop ) { if ( this.isShown && this.settings.backdrop ) {
var doAnimate = $.support.transition && animate
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />') this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body) .appendTo(document.body)
...@@ -139,12 +143,15 @@ ...@@ -139,12 +143,15 @@
this.$backdrop.click($.proxy(this.hide, this)) this.$backdrop.click($.proxy(this.hide, this))
} }
setTimeout(function () { if ( doAnimate ) {
that.$backdrop && that.$backdrop.addClass('in') that.$backdrop[0].offsetWidth // force reflow
$.support.transition && that.$backdrop.hasClass('fade') ? }
that.$backdrop.one(transitionEnd, callback) :
callback() that.$backdrop && that.$backdrop.addClass('in')
}, 0)
doAnimate ?
that.$backdrop.one(transitionEnd, callback) :
callback()
} else if ( !this.isShown && this.$backdrop ) { } else if ( !this.isShown && this.$backdrop ) {
this.$backdrop.removeClass('in') this.$backdrop.removeClass('in')
...@@ -165,13 +172,13 @@ ...@@ -165,13 +172,13 @@
function escape() { function escape() {
var that = this var that = this
if ( this.isShown && this.settings.keyboard ) { if ( this.isShown && this.settings.keyboard ) {
$('body').bind('keyup.modal', function ( e ) { $(window).bind('keyup.modal', function ( e ) {
if ( e.which == 27 ) { if ( e.which == 27 ) {
that.hide() that.hide()
} }
}) })
} else if ( !this.isShown ) { } else if ( !this.isShown ) {
$('body').unbind('keyup.modal') $(window).unbind('keyup.modal')
} }
} }
......
js/tests/unit/bootstrap-modal.js
View file @ ac800119
$(function () { $(function () {
module("bootstrap-modal") module("bootstrap-modal")
test("should be defined on jquery object", function () { test("should be defined on jquery object", function () {
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
ok(div.modal, 'modal method is defined') ok(div.modal, 'modal method is defined')
}) })
test("should return element", function () { test("should return element", function () {
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
ok(div.modal() == div, 'document.body returned') ok(div.modal() == div, 'div element returned')
}) })
test("should expose defaults var for settings", function () { test("should expose defaults var for settings", function () {
ok($.fn.modal.defaults, 'default object exposed') ok($.fn.modal.defaults, 'default object exposed')
}) })
test("should insert into dom when show method is called", function () { test("should insert into dom when show method is called", function () {
stop() stop()
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
div div
.modal() .modal()
.modal("show") .bind("shown", function () {
.bind("shown", function () { ok($('#modal-test').length, 'modal insterted into dom')
ok($('#modal-test').length, 'modal insterted into dom') start()
start() div.remove()
div.remove() })
}) .modal("show")
}) })
test("should hide modal when hide is called", function () { test("should hide modal when hide is called", function () {
stop() stop()
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
div div
.modal() .modal()
.bind("shown", function () { .bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible') ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal insterted into dom') ok($('#modal-test').length, 'modal insterted into dom')
div.modal("hide") div.modal("hide")
}) })
.bind("hidden", function() { .bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden') ok(!$('#modal-test').is(":visible"), 'modal hidden')
start() start()
div.remove() div.remove()
}) })
.modal("show") .modal("show")
}) })
test("should toggle when toggle is called", function () { test("should toggle when toggle is called", function () {
stop() stop()
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
div div
.modal() .modal()
.bind("shown", function () { .bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible') ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal insterted into dom') ok($('#modal-test').length, 'modal insterted into dom')
div.modal("toggle") div.modal("toggle")
}) })
.bind("hidden", function() { .bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden') ok(!$('#modal-test').is(":visible"), 'modal hidden')
start() start()
div.remove() div.remove()
}) })
.modal("toggle") .modal("toggle")
}) })
test("should remove from dom when click .close", function () { test("should remove from dom when click .close", function () {
stop() stop()
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'><span class='close'></span></div>") var div = $("<div id='modal-test'><span class='close'></span></div>")
div div
.modal() .modal()
.bind("shown", function () { .bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible') ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal insterted into dom') ok($('#modal-test').length, 'modal insterted into dom')
div.find('.close').click() div.find('.close').click()
}) })
.bind("hidden", function() { .bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden') ok(!$('#modal-test').is(":visible"), 'modal hidden')
start() start()
div.remove() div.remove()
}) })
.modal("toggle") .modal("toggle")
}) })
test("should add backdrop when desired", function () { test("should add backdrop when desired", function () {
stop() stop()
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
div div
.modal({backdrop:true}) .modal({ backdrop:true })
.modal("show") .bind("shown", function () {
.bind("shown", function () { equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom') start()
start() div.remove()
div.remove() $('.modal-backdrop').remove()
$('.modal-backdrop').remove() })
}) .modal("show")
}) })
test("should not add backdrop when not desired", function () { test("should not add backdrop when not desired", function () {
stop() stop()
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
div div
.modal({backdrop:false}) .modal({backdrop:false})
.modal("show") .bind("shown", function () {
.bind("shown", function () { equal($('.modal-backdrop').length, 0, 'modal backdrop not inserted into dom')
equal($('.modal-backdrop').length, 0, 'modal backdrop not inserted into dom') start()
start() div.remove()
div.remove() })
}) .modal("show")
}) })
test("should close backdrop when clicked", function () { test("should close backdrop when clicked", function () {
stop() stop()
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
div div
.modal({backdrop:true}) .modal({backdrop:true})
.modal("show") .bind("shown", function () {
.bind("shown", function () { equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom') $('.modal-backdrop').click()
$('.modal-backdrop').click() equal($('.modal-backdrop').length, 0, 'modal backdrop removed from dom')
equal($('.modal-backdrop').length, 0, 'modal backdrop removed from dom') start()
start() div.remove()
div.remove() })
}) .modal("show")
}) })
test("should not close backdrop when click disabled", function () { test("should not close backdrop when click disabled", function () {
stop() stop()
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
div div
.modal({backdrop: 'static'}) .modal({backdrop: 'static'})
.modal("show") .bind("shown", function () {
.bind("shown", function () { equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom') $('.modal-backdrop').click()
$('.modal-backdrop').click() equal($('.modal-backdrop').length, 1, 'modal backdrop still in dom')
equal($('.modal-backdrop').length, 1, 'modal backdrop still in dom') start()
start() div.remove()
div.remove() $('.modal-backdrop').remove()
$('.modal-backdrop').remove() })
}) .modal("show")
}) })
}) })
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment