Skip to content

Commit cf6f867

Browse files
Andrew LucaJohann-S
Andrew Luca
authored and
Johann-S
committed
fix: add padding to navbar-fixed-* on modal open
1 parent 0b78f46 commit cf6f867

File tree

1 file changed

+37
-21
lines changed

1 file changed

+37
-21
lines changed

‎js/modal.js

+37-21
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,16 @@
1414
// ======================
1515

1616
var Modal = function (element, options) {
17-
this.options = options
18-
this.$body = $(document.body)
19-
this.$element = $(element)
20-
this.$dialog = this.$element.find('.modal-dialog')
21-
this.$backdrop = null
22-
this.isShown = null
23-
this.originalBodyPad = null
24-
this.scrollbarWidth = 0
17+
this.options = options
18+
this.$body = $(document.body)
19+
this.$element = $(element)
20+
this.$dialog = this.$element.find('.modal-dialog')
21+
this.$backdrop = null
22+
this.isShown = null
23+
this.originalBodyPad = null
24+
this.scrollbarWidth = 0
2525
this.ignoreBackdropClick = false
26+
this.fixedContent = '.navbar-fixed-top, .navbar-fixed-bottom'
2627

2728
if (this.options.remote) {
2829
this.$element
@@ -33,7 +34,7 @@
3334
}
3435
}
3536

36-
Modal.VERSION = '3.4.0'
37+
Modal.VERSION = '3.4.0'
3738

3839
Modal.TRANSITION_DURATION = 300
3940
Modal.BACKDROP_TRANSITION_DURATION = 150
@@ -50,7 +51,7 @@
5051

5152
Modal.prototype.show = function (_relatedTarget) {
5253
var that = this
53-
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
54+
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
5455

5556
this.$element.trigger(e)
5657

@@ -141,8 +142,8 @@
141142
.off('focusin.bs.modal') // guard against infinite focus loop
142143
.on('focusin.bs.modal', $.proxy(function (e) {
143144
if (document !== e.target &&
144-
this.$element[0] !== e.target &&
145-
!this.$element.has(e.target).length) {
145+
this.$element[0] !== e.target &&
146+
!this.$element.has(e.target).length) {
146147
this.$element.trigger('focus')
147148
}
148149
}, this))
@@ -244,7 +245,7 @@
244245
var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight
245246

246247
this.$element.css({
247-
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
248+
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
248249
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
249250
})
250251
}
@@ -269,11 +270,26 @@
269270
Modal.prototype.setScrollbar = function () {
270271
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
271272
this.originalBodyPad = document.body.style.paddingRight || ''
272-
if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
273+
var scrollbarWidth = this.scrollbarWidth
274+
if (this.bodyIsOverflowing) {
275+
this.$body.css('padding-right', bodyPad + scrollbarWidth)
276+
$(this.fixedContent).each(function (index, element) {
277+
var actualPadding = element.style.paddingRight
278+
var calculatedPadding = $(element).css('padding-right')
279+
$(element)
280+
.data('padding-right', actualPadding)
281+
.css('padding-right', parseFloat(calculatedPadding) + scrollbarWidth + 'px')
282+
})
283+
}
273284
}
274285

275286
Modal.prototype.resetScrollbar = function () {
276287
this.$body.css('padding-right', this.originalBodyPad)
288+
$(this.fixedContent).each(function (index, element) {
289+
var padding = $(element).data('padding-right')
290+
$(element).removeData('padding-right')
291+
element.style.paddingRight = padding ? padding : ''
292+
})
277293
}
278294

279295
Modal.prototype.measureScrollbar = function () { // thx walsh
@@ -291,8 +307,8 @@
291307

292308
function Plugin(option, _relatedTarget) {
293309
return this.each(function () {
294-
var $this = $(this)
295-
var data = $this.data('bs.modal')
310+
var $this = $(this)
311+
var data = $this.data('bs.modal')
296312
var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
297313

298314
if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
@@ -303,7 +319,7 @@
303319

304320
var old = $.fn.modal
305321

306-
$.fn.modal = Plugin
322+
$.fn.modal = Plugin
307323
$.fn.modal.Constructor = Modal
308324

309325

@@ -320,13 +336,13 @@
320336
// ==============
321337

322338
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
323-
var $this = $(this)
324-
var href = $this.attr('href')
325-
var target = $this.attr('data-target') ||
339+
var $this = $(this)
340+
var href = $this.attr('href')
341+
var target = $this.attr('data-target') ||
326342
(href && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
327343

328344
var $target = $(document).find(target)
329-
var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
345+
var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
330346

331347
if ($this.is('a')) e.preventDefault()
332348

0 commit comments

Comments
 (0)