diff --git a/js/modal.js b/js/modal.js index 7ee2679a2a..13bcf0af8a 100644 --- a/js/modal.js +++ b/js/modal.js @@ -14,13 +14,15 @@ // ====================== var Modal = function (element, options) { - this.options = options - this.$body = $(document.body) - this.$element = $(element) - this.$backdrop = null - this.isShown = null - this.originalBodyPad = null - this.scrollbarWidth = 0 + this.options = options + this.$body = $(document.body) + this.$element = $(element) + this.$dialog = this.$element.find('.modal-dialog') + this.$backdrop = null + this.isShown = null + this.originalBodyPad = null + this.scrollbarWidth = 0 + this.ignoreBackdropClick = false if (this.options.remote) { this.$element @@ -65,6 +67,12 @@ this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) + this.$dialog.on('mousedown.dismiss.bs.modal', function () { + that.$element.one('mouseup.dismiss.bs.modal', function (e) { + if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true + }) + }) + this.backdrop(function () { var transition = $.support.transition && that.$element.hasClass('fade') @@ -76,7 +84,6 @@ .show() .scrollTop(0) - if (that.options.backdrop) that.adjustBackdrop() that.adjustDialog() if (transition) { @@ -92,7 +99,7 @@ var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget }) transition ? - that.$element.find('.modal-dialog') // wait for modal to slide in + that.$dialog // wait for modal to slide in .one('bsTransitionEnd', function () { that.$element.trigger('focus').trigger(e) }) @@ -121,6 +128,9 @@ .removeClass('in') .attr('aria-hidden', true) .off('click.dismiss.bs.modal') + .off('mouseup.dismiss.bs.modal') + + this.$dialog.off('mousedown.dismiss.bs.modal') $.support.transition && this.$element.hasClass('fade') ? this.$element @@ -181,13 +191,18 @@ var doAnimate = $.support.transition && animate this.$backdrop = $('
') - .prependTo(this.$element) - .on('click.dismiss.bs.modal', $.proxy(function (e) { - if (e.target !== e.currentTarget) return - this.options.backdrop == 'static' - ? this.$element[0].focus.call(this.$element[0]) - : this.hide.call(this) - }, this)) + .appendTo(this.$body) + + this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) { + if (this.ignoreBackdropClick) { + this.ignoreBackdropClick = false + return + } + if (e.target !== e.currentTarget) return + this.options.backdrop == 'static' + ? this.$element[0].focus() + : this.hide() + }, this)) if (doAnimate) this.$backdrop[0].offsetWidth // force reflow @@ -222,16 +237,9 @@ // these following methods are used to handle overflowing modals Modal.prototype.handleUpdate = function () { - if (this.options.backdrop) this.adjustBackdrop() this.adjustDialog() } - Modal.prototype.adjustBackdrop = function () { - this.$backdrop - .css('height', 0) - .css('height', this.$element[0].scrollHeight) - } - Modal.prototype.adjustDialog = function () { var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js index d0973a30d5..1397c596f2 100644 --- a/js/tests/unit/modal.js +++ b/js/tests/unit/modal.js @@ -167,7 +167,7 @@ $(function () { assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom') $('.contents').click() assert.ok($('#modal-test').is(':visible'), 'modal visible') - $('#modal-test .modal-backdrop').click() + $('#modal-test').click() }) .on('hidden.bs.modal', function () { assert.ok(!$('#modal-test').is(':visible'), 'modal hidden') @@ -222,7 +222,7 @@ $(function () { $('Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
This button should trigger a popover on click.
+This button should trigger a popover on click.
This link and that link should have tooltips on hover.
+This link and that link should have tooltips on hover.
+ +