Merge pull request #15930 from twbs/modal-restore-inline-padding

Modal: Apply any preexisting body padding again after closing
twbs · Feb 26, 2015 · 442d2dd · 442d2dd
2 parents 10c8dad + 142a9e4
commit 442d2dd
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 7 deletions.
diff --git 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
@@ -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')
+  })
 })