diff --git a/js/modal.js b/js/modal.js index 929cd991fc..7ee2679a2a 100644 --- a/js/modal.js +++ b/js/modal.js @@ -14,12 +14,13 @@ // ====================== var Modal = function (element, options) { - this.options = options - this.$body = $(document.body) - this.$element = $(element) - this.$backdrop = null - this.isShown = null - this.scrollbarWidth = 0 + this.options = options + this.$body = $(document.body) + this.$element = $(element) + this.$backdrop = null + this.isShown = null + this.originalBodyPad = null + this.scrollbarWidth = 0 if (this.options.remote) { this.$element @@ -259,11 +260,12 @@ 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) } Modal.prototype.resetScrollbar = function () { - this.$body.css('padding-right', '') + this.$body.css('padding-right', this.originalBodyPad) } Modal.prototype.measureScrollbar = function () { // thx walsh diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js index f81621b79f..3918bd1e4b 100644 --- a/js/tests/unit/modal.js +++ b/js/tests/unit/modal.js @@ -301,4 +301,81 @@ $(function () { $toggleBtn.click() }) + + QUnit.test('should restore inline body padding after closing', function (assert) { + var done = assert.async() + var originalBodyPad = 0 + var $body = $(document.body) + + $body.css('padding-right', originalBodyPad) + + $('
') + .on('hidden.bs.modal', function () { + var currentBodyPad = parseInt($body.css('padding-right'), 10) + assert.notStrictEqual($body.attr('style'), '', 'body has non-empty style attribute') + assert.strictEqual(currentBodyPad, originalBodyPad, 'original body padding was not changed') + $body.removeAttr('style') + done() + }) + .on('shown.bs.modal', function () { + $(this).bootstrapModal('hide') + }) + .bootstrapModal('show') + }) + + QUnit.test('should ignore values set via CSS when trying to restore body padding after closing', function (assert) { + var done = assert.async() + var $body = $(document.body) + var $style = $('').appendTo('head') + + $('') + .on('hidden.bs.modal', function () { + assert.ok(!$body.attr('style'), 'body does not have inline padding set') + $style.remove() + done() + }) + .on('shown.bs.modal', function () { + $(this).bootstrapModal('hide') + }) + .bootstrapModal('show') + }) + + QUnit.test('should ignore other inline styles when trying to restore body padding after closing', function (assert) { + var done = assert.async() + var $body = $(document.body) + var $style = $('').appendTo('head') + + $body.css('color', 'red') + + $('') + .on('hidden.bs.modal', function () { + assert.strictEqual($body[0].style.paddingRight, '', 'body does not have inline padding set') + assert.strictEqual($body[0].style.color, 'red', 'body still has other inline styles set') + $body.removeAttr('style') + $style.remove() + done() + }) + .on('shown.bs.modal', function () { + $(this).bootstrapModal('hide') + }) + .bootstrapModal('show') + }) + + QUnit.test('should properly restore non-pixel inline body padding after closing', function (assert) { + var done = assert.async() + var $body = $(document.body) + + $body.css('padding-right', '5%') + + $('') + .on('hidden.bs.modal', function () { + assert.strictEqual($body[0].style.paddingRight, '5%', 'body does not have inline padding set') + $body.removeAttr('style') + done() + }) + .on('shown.bs.modal', function () { + $(this).bootstrapModal('hide') + }) + .bootstrapModal('show') + }) })