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