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

fix: add padding to navbar-fixed-* on modal open

Browse Source
This commit is contained in:
Andrew Luca 2018-09-27 22:14:11 +03:00 committed by Johann-S
parent 0b78f465d3
commit cf6f867190
1 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
js/modal.js
View File

@ -14,15 +14,16 @@
// ====================== // ======================
var Modal = function (element, options) { var Modal = function (element, options) {
this.options = options this.options = options
this.$body = $(document.body) this.$body = $(document.body)
this.$element = $(element) this.$element = $(element)
this.$dialog = this.$element.find('.modal-dialog') this.$dialog = this.$element.find('.modal-dialog')
this.$backdrop = null this.$backdrop = null
this.isShown = null this.isShown = null
this.originalBodyPad = null this.originalBodyPad = null
this.scrollbarWidth = 0 this.scrollbarWidth = 0
this.ignoreBackdropClick = false this.ignoreBackdropClick = false
this.fixedContent = '.navbar-fixed-top, .navbar-fixed-bottom'
if (this.options.remote) { if (this.options.remote) {
this.$element this.$element
@ -33,7 +34,7 @@
} }
} }
Modal.VERSION = '3.4.0' Modal.VERSION = '3.4.0'
Modal.TRANSITION_DURATION = 300 Modal.TRANSITION_DURATION = 300
Modal.BACKDROP_TRANSITION_DURATION = 150 Modal.BACKDROP_TRANSITION_DURATION = 150
@ -50,7 +51,7 @@
Modal.prototype.show = function (_relatedTarget) { Modal.prototype.show = function (_relatedTarget) {
var that = this var that = this
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget }) var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
this.$element.trigger(e) this.$element.trigger(e)
@ -141,8 +142,8 @@
.off('focusin.bs.modal') // guard against infinite focus loop .off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', $.proxy(function (e) { .on('focusin.bs.modal', $.proxy(function (e) {
if (document !== e.target && if (document !== e.target &&
this.$element[0] !== e.target && this.$element[0] !== e.target &&
!this.$element.has(e.target).length) { !this.$element.has(e.target).length) {
this.$element.trigger('focus') this.$element.trigger('focus')
} }
}, this)) }, this))
@ -244,7 +245,7 @@
var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight
this.$element.css({ this.$element.css({
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '', paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : '' paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
}) })
} }
@ -269,11 +270,26 @@
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)
this.originalBodyPad = document.body.style.paddingRight || '' this.originalBodyPad = document.body.style.paddingRight || ''
if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth) var scrollbarWidth = this.scrollbarWidth
if (this.bodyIsOverflowing) {
this.$body.css('padding-right', bodyPad + scrollbarWidth)
$(this.fixedContent).each(function (index, element) {
var actualPadding = element.style.paddingRight
var calculatedPadding = $(element).css('padding-right')
$(element)
.data('padding-right', actualPadding)
.css('padding-right', parseFloat(calculatedPadding) + scrollbarWidth + 'px')
})
}
} }
Modal.prototype.resetScrollbar = function () { Modal.prototype.resetScrollbar = function () {
this.$body.css('padding-right', this.originalBodyPad) this.$body.css('padding-right', this.originalBodyPad)
$(this.fixedContent).each(function (index, element) {
var padding = $(element).data('padding-right')
$(element).removeData('padding-right')
element.style.paddingRight = padding ? padding : ''
})
} }
Modal.prototype.measureScrollbar = function () { // thx walsh Modal.prototype.measureScrollbar = function () { // thx walsh
@ -291,8 +307,8 @@
function Plugin(option, _relatedTarget) { function Plugin(option, _relatedTarget) {
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
var data = $this.data('bs.modal') var data = $this.data('bs.modal')
var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option) var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('bs.modal', (data = new Modal(this, options))) if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
@ -303,7 +319,7 @@
var old = $.fn.modal var old = $.fn.modal
$.fn.modal = Plugin $.fn.modal = Plugin
$.fn.modal.Constructor = Modal $.fn.modal.Constructor = Modal
@ -320,13 +336,13 @@
// ============== // ==============
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) { $(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
var $this = $(this) var $this = $(this)
var href = $this.attr('href') var href = $this.attr('href')
var target = $this.attr('data-target') || var target = $this.attr('data-target') ||
(href && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7 (href && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
var $target = $(document).find(target) var $target = $(document).find(target)
var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data()) var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
if ($this.is('a')) e.preventDefault() if ($this.is('a')) e.preventDefault()