rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #14933 from twbs/center-modal-at-all-times

Browse Source 
Center modal at all times
This commit is contained in:
Heinrich Fenkart 2014-11-05 01:39:46 +01:00
commit 72ad89b077
1 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
js/modal.js
View File

@ -56,11 +56,11 @@
this.isShown = true this.isShown = true
this.checkScrollbar() this.checkScrollbar()
this.setScrollbar()
this.$body.addClass('modal-open') this.$body.addClass('modal-open')
this.setScrollbar()
this.escape() this.escape()
if (this.options.backdrop) this.resize() this.resize()
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
@ -75,7 +75,8 @@
.show() .show()
.scrollTop(0) .scrollTop(0)
if (that.options.backdrop) that.setBackdropHeight() if (that.options.backdrop) that.adjustBackdrop()
that.adjustDialog()
if (transition) { if (transition) {
that.$element[0].offsetWidth // force reflow that.$element[0].offsetWidth // force reflow
@ -111,7 +112,7 @@
this.isShown = false this.isShown = false
this.escape() this.escape()
if (this.options.backdrop) this.resize() this.resize()
$(document).off('focusin.bs.modal') $(document).off('focusin.bs.modal')
@ -149,7 +150,7 @@
Modal.prototype.resize = function () { Modal.prototype.resize = function () {
if (this.isShown) { if (this.isShown) {
$(window).on('resize.bs.modal', $.proxy(this.setBackdropHeight, this)) $(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this))
} else { } else {
$(window).off('resize.bs.modal') $(window).off('resize.bs.modal')
} }
@ -160,6 +161,7 @@
this.$element.hide() this.$element.hide()
this.backdrop(function () { this.backdrop(function () {
that.$body.removeClass('modal-open') that.$body.removeClass('modal-open')
that.resetAdjustments()
that.resetScrollbar() that.resetScrollbar()
that.$element.trigger('hidden.bs.modal') that.$element.trigger('hidden.bs.modal')
}) })
@ -216,19 +218,43 @@
} }
} }
Modal.prototype.setBackdropHeight = function () { // 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 this.$backdrop
.css('height', 0) .css('height', 0)
.css('height', this.$element[0].scrollHeight) .css('height', this.$element[0].scrollHeight)
} }
Modal.prototype.adjustDialog = function () {
var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight
this.$element.css({
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
})
}
Modal.prototype.resetAdjustments = function () {
this.$element.css({
paddingLeft: '',
paddingRight: ''
})
}
Modal.prototype.checkScrollbar = function () { Modal.prototype.checkScrollbar = function () {
this.bodyIsOverflowing = document.body.scrollHeight > document.documentElement.clientHeight
this.scrollbarWidth = this.measureScrollbar() this.scrollbarWidth = this.measureScrollbar()
} }
Modal.prototype.setScrollbar = function () { Modal.prototype.setScrollbar = function () {
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10) var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
if (this.scrollbarWidth) this.$body.css('padding-right', bodyPad + this.scrollbarWidth) if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
} }
Modal.prototype.resetScrollbar = function () { Modal.prototype.resetScrollbar = function () {
@ -236,7 +262,6 @@
} }
Modal.prototype.measureScrollbar = function () { // thx walsh Modal.prototype.measureScrollbar = function () { // thx walsh
if (document.body.clientWidth >= window.innerWidth) return 0
var scrollDiv = document.createElement('div') var scrollDiv = document.createElement('div')
scrollDiv.className = 'modal-scrollbar-measure' scrollDiv.className = 'modal-scrollbar-measure'
this.$body.append(scrollDiv) this.$body.append(scrollDiv)