Merge pull request #3531 from projectblacklight/bl8-backport-3447-3453-modal-scroll

[8.x] Backport two facet modal scrolling bugfixes

Author: jcoyne

app/assets/stylesheets/blacklight/_bootstrap_overrides.scss

@@ -27,10 +27,16 @@
   white-space: nowrap;
 }
 
-.modal[open] {
+// Blacklight's decision to try to use bootstrap modal CSS with an html5 dialog --
+// in such a way the <dialog> element actually serves as the modal backdrop --
+// requires some fixes to both bootstrap CSS and user-agent default css
+dialog.modal[open] {
   // override bootstrap .modal class default display: none
   // since we aren't using bootstrap JS that sets and unsets the display
   display: block;
   background: none;
   border: none;
+
+  max-height: unset; // override user-agent dialog
+  max-width: unset; // override user-agent dialog
 }

app/javascript/blacklight/modal.js

@@ -56,6 +56,9 @@
 const Modal = (() => {
   const modal = {}
 
+  // bootstrap class that will stop body scrolling when modal is open
+  const bootstrapBodyClassOpen = "modal-open";
+
   // a Bootstrap modal div that should be already on the page hidden
   modal.modalSelector = '#blacklight-modal';
 
@@ -170,6 +173,12 @@ const Modal = (() => {
     dom.dispatchEvent(e)
 
     dom.close()
+
+    // Turn body scrolling back to what it was
+    document.body.style["overflow"] = modal.originalBodyOverflow;
+    document.body.style["padding-right"] = modal.originalBodyPaddingRight;
+    modal.originalBodyOverflow = undefined;
+    modal.originalBodyPaddingRight = undefined;
   }
 
   modal.show = function(el) {
@@ -181,6 +190,12 @@ const Modal = (() => {
     dom.dispatchEvent(e)
 
     dom.showModal()
+
+    // Turn off body scrolling
+    modal.originalBodyOverflow = document.body.style['overflow'];
+    modal.originalBodyPaddingRight = document.body.style['padding-right'];
+    document.body.style["overflow"] = "hidden"
+    document.body.style["padding-right"] = "0px"
   }
 
   modal.target = function() {