diff --git a/js/modal.js b/js/modal.js index 929cd991fc686832788652ebed1a18a0c18d572b..7ee2679a2a743086cef661b3950aa44eed7bd6f6 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 f81621b79f6eded09b910b1978068945fb3bc2f9..3918bd1e4bddbcd4e0c55ab2b03f452753f0ea33 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) + + $('<div id="modal-test"/>') + .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 = $('<style>body { padding-right: 42px; }</style>').appendTo('head') + + $('<div id="modal-test"/>') + .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 = $('<style>body { padding-right: 42px; }</style>').appendTo('head') + + $body.css('color', 'red') + + $('<div id="modal-test"/>') + .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%') + + $('<div id="modal-test"/>') + .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') + }) })