change modal.js to use is-fixed classes to target padding-right

dist/js/bootstrap.js

@@ -1669,6 +1669,7 @@ var Modal = (function ($) {
   };
 
   var ClassName = {
+    SCROLLBAR_MEASURER: 'modal-scrollbar-measure',
     BACKDROP: 'modal-backdrop',
     OPEN: 'modal-open',
     FADE: 'fade',
@@ -1679,7 +1680,7 @@ var Modal = (function ($) {
     DIALOG: '.modal-dialog',
     DATA_TOGGLE: '[data-toggle="modal"]',
     DATA_DISMISS: '[data-dismiss="modal"]',
-    SCROLLBAR_MEASURER: 'modal-scrollbar-measure'
+    FIXED_CONTENT: '.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed'
   };
 
   /**
@@ -2029,7 +2030,7 @@ var Modal = (function ($) {
     }, {
       key: '_setScrollbar',
       value: function _setScrollbar() {
-        var bodyPadding = parseInt($(document.body).css('padding-right') || 0, 10);
+        var bodyPadding = parseInt($(Selector.FIXED_CONTENT).css('padding-right') || 0, 10);
 
         this._originalBodyPadding = document.body.style.paddingRight || '';
 
@@ -2047,7 +2048,7 @@ var Modal = (function ($) {
       value: function _getScrollbarWidth() {
         // thx d.walsh
         var scrollDiv = document.createElement('div');
-        scrollDiv.className = Selector.SCROLLBAR_MEASURER;
+        scrollDiv.className = ClassName.SCROLLBAR_MEASURER;
         document.body.appendChild(scrollDiv);
         var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
         document.body.removeChild(scrollDiv);

dist/js/umd/modal.js

@@ -74,6 +74,7 @@
     };
 
     var ClassName = {
+      SCROLLBAR_MEASURER: 'modal-scrollbar-measure',
       BACKDROP: 'modal-backdrop',
       OPEN: 'modal-open',
       FADE: 'fade',
@@ -84,7 +85,7 @@
       DIALOG: '.modal-dialog',
       DATA_TOGGLE: '[data-toggle="modal"]',
       DATA_DISMISS: '[data-dismiss="modal"]',
-      SCROLLBAR_MEASURER: 'modal-scrollbar-measure'
+      FIXED_CONTENT: '.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed'
     };
 
     /**
@@ -434,7 +435,7 @@
       }, {
         key: '_setScrollbar',
         value: function _setScrollbar() {
-          var bodyPadding = parseInt($(document.body).css('padding-right') || 0, 10);
+          var bodyPadding = parseInt($(Selector.FIXED_CONTENT).css('padding-right') || 0, 10);
 
           this._originalBodyPadding = document.body.style.paddingRight || '';
 
@@ -452,7 +453,7 @@
         value: function _getScrollbarWidth() {
           // thx d.walsh
           var scrollDiv = document.createElement('div');
-          scrollDiv.className = Selector.SCROLLBAR_MEASURER;
+          scrollDiv.className = ClassName.SCROLLBAR_MEASURER;
           document.body.appendChild(scrollDiv);
           var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
           document.body.removeChild(scrollDiv);

js/dist/modal.js

@@ -57,6 +57,7 @@ var Modal = (function ($) {
   };
 
   var ClassName = {
+    SCROLLBAR_MEASURER: 'modal-scrollbar-measure',
     BACKDROP: 'modal-backdrop',
     OPEN: 'modal-open',
     FADE: 'fade',
@@ -67,7 +68,7 @@ var Modal = (function ($) {
     DIALOG: '.modal-dialog',
     DATA_TOGGLE: '[data-toggle="modal"]',
     DATA_DISMISS: '[data-dismiss="modal"]',
-    SCROLLBAR_MEASURER: 'modal-scrollbar-measure'
+    FIXED_CONTENT: '.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed'
   };
 
   /**
@@ -417,7 +418,7 @@ var Modal = (function ($) {
     }, {
       key: '_setScrollbar',
       value: function _setScrollbar() {
-        var bodyPadding = parseInt($(document.body).css('padding-right') || 0, 10);
+        var bodyPadding = parseInt($(Selector.FIXED_CONTENT).css('padding-right') || 0, 10);
 
         this._originalBodyPadding = document.body.style.paddingRight || '';
 
@@ -435,7 +436,7 @@ var Modal = (function ($) {
       value: function _getScrollbarWidth() {
         // thx d.walsh
         var scrollDiv = document.createElement('div');
-        scrollDiv.className = Selector.SCROLLBAR_MEASURER;
+        scrollDiv.className = ClassName.SCROLLBAR_MEASURER;
         document.body.appendChild(scrollDiv);
         var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
         document.body.removeChild(scrollDiv);

js/src/modal.js

@@ -55,17 +55,18 @@ const Modal = (($) => {
   }
 
   const ClassName = {
-    BACKDROP : 'modal-backdrop',
+    SCROLLBAR_MEASURER : 'modal-scrollbar-measure',
-    OPEN     : 'modal-open',
+    BACKDROP           : 'modal-backdrop',
-    FADE     : 'fade',
+    OPEN               : 'modal-open',
-    IN       : 'in'
+    FADE               : 'fade',
+    IN                 : 'in'
   }
 
   const Selector = {
     DIALOG             : '.modal-dialog',
     DATA_TOGGLE        : '[data-toggle="modal"]',
     DATA_DISMISS       : '[data-dismiss="modal"]',
-    SCROLLBAR_MEASURER : 'modal-scrollbar-measure'
+    FIXED_CONTENT      : '.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed'
   }
 
 
@@ -414,7 +415,7 @@ const Modal = (($) => {
 
     _setScrollbar() {
       let bodyPadding = parseInt(
-        $(document.body).css('padding-right') || 0,
+        $(Selector.FIXED_CONTENT).css('padding-right') || 0,
         10
       )
 
@@ -432,7 +433,7 @@ const Modal = (($) => {
 
     _getScrollbarWidth() { // thx d.walsh
       let scrollDiv = document.createElement('div')
-      scrollDiv.className = Selector.SCROLLBAR_MEASURER
+      scrollDiv.className = ClassName.SCROLLBAR_MEASURER
       document.body.appendChild(scrollDiv)
       let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
       document.body.removeChild(scrollDiv)