Merge pull request #14927 from twbs/fix-modal-backdrop-above-scrollbar

Fix modal backdrop overlaying the modal's scrollbar

js/modal.js

@@ -60,6 +60,7 @@
 
     this.setScrollbar()
     this.escape()
+    if (this.options.backdrop) this.resize()
 
     this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
 
@@ -74,6 +75,8 @@
         .show()
         .scrollTop(0)
 
+      if (that.options.backdrop) that.setBackdropHeight()
+
       if (transition) {
         that.$element[0].offsetWidth // force reflow
       }
@@ -108,6 +111,7 @@
     this.isShown = false
 
     this.escape()
+    if (this.options.backdrop) this.resize()
 
     $(document).off('focusin.bs.modal')
 
@@ -143,6 +147,14 @@
     }
   }
 
+  Modal.prototype.resize = function () {
+    if (this.isShown) {
+      $(window).on('resize.bs.modal', $.proxy(this.setBackdropHeight, this))
+    } else {
+      $(window).off('resize.bs.modal')
+    }
+  }
+
   Modal.prototype.hideModal = function () {
     var that = this
     this.$element.hide()
@@ -204,6 +216,12 @@
     }
   }
 
+  Modal.prototype.setBackdropHeight = function () {
+    this.$backdrop
+      .css('height', 0)
+      .css('height', this.$element[0].scrollHeight)
+  }
+
   Modal.prototype.checkScrollbar = function () {
     this.scrollbarWidth = this.measureScrollbar()
   }

less/modals.less

@@ -62,10 +62,9 @@
 
 // Modal background
 .modal-backdrop {
-  position: fixed;
+  position: absolute;
   top: 0;
   right: 0;
-  bottom: 0;
   left: 0;
   background-color: @modal-backdrop-bg;
   // Fade for backdrop