mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-30 12:24:19 +01:00
force reflow instead of relying on eventloop (firefox)
listen to window for escape press
This commit is contained in:
Jacob Thornton
parent
ba6f4f03da
commit
ac8001190a
@ -12,7 +12,7 @@
|
||||
<![endif]-->
|
||||
|
||||
<!-- 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>$(function () { prettyPrint() })</script>
|
||||
<script src="../js/bootstrap-modal.js"></script>
|
||||
|
||||
33
js/bootstrap-modal.js
vendored
33
js/bootstrap-modal.js
vendored
@ -85,11 +85,13 @@
|
||||
.appendTo(document.body)
|
||||
.show()
|
||||
|
||||
setTimeout(function () {
|
||||
that.$element
|
||||
.addClass('in')
|
||||
.trigger('shown')
|
||||
}, 0)
|
||||
if ($.support.transition && that.$element.hasClass('fade')) {
|
||||
that.$backdrop[0].offsetWidth // force reflow
|
||||
}
|
||||
|
||||
that.$element
|
||||
.addClass('in')
|
||||
.trigger('shown')
|
||||
})
|
||||
|
||||
return this
|
||||
@ -132,6 +134,8 @@
|
||||
var that = this
|
||||
, animate = this.$element.hasClass('fade') ? 'fade' : ''
|
||||
if ( this.isShown && this.settings.backdrop ) {
|
||||
var doAnimate = $.support.transition && animate
|
||||
|
||||
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
|
||||
.appendTo(document.body)
|
||||
|
||||
@ -139,12 +143,15 @@
|
||||
this.$backdrop.click($.proxy(this.hide, this))
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
that.$backdrop && that.$backdrop.addClass('in')
|
||||
$.support.transition && that.$backdrop.hasClass('fade') ?
|
||||
that.$backdrop.one(transitionEnd, callback) :
|
||||
callback()
|
||||
}, 0)
|
||||
if ( doAnimate ) {
|
||||
that.$backdrop[0].offsetWidth // force reflow
|
||||
}
|
||||
|
||||
that.$backdrop && that.$backdrop.addClass('in')
|
||||
|
||||
doAnimate ?
|
||||
that.$backdrop.one(transitionEnd, callback) :
|
||||
callback()
|
||||
|
||||
} else if ( !this.isShown && this.$backdrop ) {
|
||||
this.$backdrop.removeClass('in')
|
||||
@ -165,13 +172,13 @@
|
||||
function escape() {
|
||||
var that = this
|
||||
if ( this.isShown && this.settings.keyboard ) {
|
||||
$('body').bind('keyup.modal', function ( e ) {
|
||||
$(window).bind('keyup.modal', function ( e ) {
|
||||
if ( e.which == 27 ) {
|
||||
that.hide()
|
||||
}
|
||||
})
|
||||
} else if ( !this.isShown ) {
|
||||
$('body').unbind('keyup.modal')
|
||||
$(window).unbind('keyup.modal')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
274
js/tests/unit/bootstrap-modal.js
vendored
274
js/tests/unit/bootstrap-modal.js
vendored
@ -1,151 +1,151 @@
|
||||
$(function () {
|
||||
|
||||
module("bootstrap-modal")
|
||||
module("bootstrap-modal")
|
||||
|
||||
test("should be defined on jquery object", function () {
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
ok(div.modal, 'modal method is defined')
|
||||
})
|
||||
test("should be defined on jquery object", function () {
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
ok(div.modal, 'modal method is defined')
|
||||
})
|
||||
|
||||
test("should return element", function () {
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
ok(div.modal() == div, 'document.body returned')
|
||||
})
|
||||
test("should return element", function () {
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
ok(div.modal() == div, 'div element returned')
|
||||
})
|
||||
|
||||
test("should expose defaults var for settings", function () {
|
||||
ok($.fn.modal.defaults, 'default object exposed')
|
||||
})
|
||||
test("should expose defaults var for settings", function () {
|
||||
ok($.fn.modal.defaults, 'default object exposed')
|
||||
})
|
||||
|
||||
test("should insert into dom when show method is called", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
div
|
||||
.modal()
|
||||
.modal("show")
|
||||
.bind("shown", function () {
|
||||
ok($('#modal-test').length, 'modal insterted into dom')
|
||||
start()
|
||||
div.remove()
|
||||
})
|
||||
})
|
||||
test("should insert into dom when show method is called", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
div
|
||||
.modal()
|
||||
.bind("shown", function () {
|
||||
ok($('#modal-test').length, 'modal insterted into dom')
|
||||
start()
|
||||
div.remove()
|
||||
})
|
||||
.modal("show")
|
||||
})
|
||||
|
||||
test("should hide modal when hide is called", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
div
|
||||
.modal()
|
||||
.bind("shown", function () {
|
||||
ok($('#modal-test').is(":visible"), 'modal visible')
|
||||
ok($('#modal-test').length, 'modal insterted into dom')
|
||||
div.modal("hide")
|
||||
})
|
||||
.bind("hidden", function() {
|
||||
ok(!$('#modal-test').is(":visible"), 'modal hidden')
|
||||
start()
|
||||
div.remove()
|
||||
})
|
||||
.modal("show")
|
||||
})
|
||||
test("should hide modal when hide is called", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
div
|
||||
.modal()
|
||||
.bind("shown", function () {
|
||||
ok($('#modal-test').is(":visible"), 'modal visible')
|
||||
ok($('#modal-test').length, 'modal insterted into dom')
|
||||
div.modal("hide")
|
||||
})
|
||||
.bind("hidden", function() {
|
||||
ok(!$('#modal-test').is(":visible"), 'modal hidden')
|
||||
start()
|
||||
div.remove()
|
||||
})
|
||||
.modal("show")
|
||||
})
|
||||
|
||||
test("should toggle when toggle is called", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
div
|
||||
.modal()
|
||||
.bind("shown", function () {
|
||||
ok($('#modal-test').is(":visible"), 'modal visible')
|
||||
ok($('#modal-test').length, 'modal insterted into dom')
|
||||
div.modal("toggle")
|
||||
})
|
||||
.bind("hidden", function() {
|
||||
ok(!$('#modal-test').is(":visible"), 'modal hidden')
|
||||
start()
|
||||
div.remove()
|
||||
})
|
||||
.modal("toggle")
|
||||
})
|
||||
test("should toggle when toggle is called", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
div
|
||||
.modal()
|
||||
.bind("shown", function () {
|
||||
ok($('#modal-test').is(":visible"), 'modal visible')
|
||||
ok($('#modal-test').length, 'modal insterted into dom')
|
||||
div.modal("toggle")
|
||||
})
|
||||
.bind("hidden", function() {
|
||||
ok(!$('#modal-test').is(":visible"), 'modal hidden')
|
||||
start()
|
||||
div.remove()
|
||||
})
|
||||
.modal("toggle")
|
||||
})
|
||||
|
||||
test("should remove from dom when click .close", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div id='modal-test'><span class='close'></span></div>")
|
||||
div
|
||||
.modal()
|
||||
.bind("shown", function () {
|
||||
ok($('#modal-test').is(":visible"), 'modal visible')
|
||||
ok($('#modal-test').length, 'modal insterted into dom')
|
||||
div.find('.close').click()
|
||||
})
|
||||
.bind("hidden", function() {
|
||||
ok(!$('#modal-test').is(":visible"), 'modal hidden')
|
||||
start()
|
||||
div.remove()
|
||||
})
|
||||
.modal("toggle")
|
||||
})
|
||||
test("should remove from dom when click .close", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div id='modal-test'><span class='close'></span></div>")
|
||||
div
|
||||
.modal()
|
||||
.bind("shown", function () {
|
||||
ok($('#modal-test').is(":visible"), 'modal visible')
|
||||
ok($('#modal-test').length, 'modal insterted into dom')
|
||||
div.find('.close').click()
|
||||
})
|
||||
.bind("hidden", function() {
|
||||
ok(!$('#modal-test').is(":visible"), 'modal hidden')
|
||||
start()
|
||||
div.remove()
|
||||
})
|
||||
.modal("toggle")
|
||||
})
|
||||
|
||||
test("should add backdrop when desired", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
div
|
||||
.modal({backdrop:true})
|
||||
.modal("show")
|
||||
.bind("shown", function () {
|
||||
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
|
||||
start()
|
||||
div.remove()
|
||||
$('.modal-backdrop').remove()
|
||||
})
|
||||
})
|
||||
test("should add backdrop when desired", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
div
|
||||
.modal({ backdrop:true })
|
||||
.bind("shown", function () {
|
||||
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
|
||||
start()
|
||||
div.remove()
|
||||
$('.modal-backdrop').remove()
|
||||
})
|
||||
.modal("show")
|
||||
})
|
||||
|
||||
test("should not add backdrop when not desired", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
div
|
||||
.modal({backdrop:false})
|
||||
.modal("show")
|
||||
.bind("shown", function () {
|
||||
equal($('.modal-backdrop').length, 0, 'modal backdrop not inserted into dom')
|
||||
start()
|
||||
div.remove()
|
||||
})
|
||||
})
|
||||
test("should not add backdrop when not desired", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
div
|
||||
.modal({backdrop:false})
|
||||
.bind("shown", function () {
|
||||
equal($('.modal-backdrop').length, 0, 'modal backdrop not inserted into dom')
|
||||
start()
|
||||
div.remove()
|
||||
})
|
||||
.modal("show")
|
||||
})
|
||||
|
||||
test("should close backdrop when clicked", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
div
|
||||
.modal({backdrop:true})
|
||||
.modal("show")
|
||||
.bind("shown", function () {
|
||||
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
|
||||
$('.modal-backdrop').click()
|
||||
equal($('.modal-backdrop').length, 0, 'modal backdrop removed from dom')
|
||||
start()
|
||||
div.remove()
|
||||
})
|
||||
})
|
||||
test("should close backdrop when clicked", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
div
|
||||
.modal({backdrop:true})
|
||||
.bind("shown", function () {
|
||||
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
|
||||
$('.modal-backdrop').click()
|
||||
equal($('.modal-backdrop').length, 0, 'modal backdrop removed from dom')
|
||||
start()
|
||||
div.remove()
|
||||
})
|
||||
.modal("show")
|
||||
})
|
||||
|
||||
test("should not close backdrop when click disabled", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
div
|
||||
.modal({backdrop: 'static'})
|
||||
.modal("show")
|
||||
.bind("shown", function () {
|
||||
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
|
||||
$('.modal-backdrop').click()
|
||||
equal($('.modal-backdrop').length, 1, 'modal backdrop still in dom')
|
||||
start()
|
||||
div.remove()
|
||||
$('.modal-backdrop').remove()
|
||||
})
|
||||
})
|
||||
test("should not close backdrop when click disabled", function () {
|
||||
stop()
|
||||
$.support.transition = false
|
||||
var div = $("<div id='modal-test'></div>")
|
||||
div
|
||||
.modal({backdrop: 'static'})
|
||||
.bind("shown", function () {
|
||||
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
|
||||
$('.modal-backdrop').click()
|
||||
equal($('.modal-backdrop').length, 1, 'modal backdrop still in dom')
|
||||
start()
|
||||
div.remove()
|
||||
$('.modal-backdrop').remove()
|
||||
})
|
||||
.modal("show")
|
||||
})
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user