From edc608dd3bd9c35926ae1e70e2ef9b72d54c14e8 Mon Sep 17 00:00:00 2001 From: Jonathan Rochkind Date: Thu, 21 Nov 2024 14:53:15 -0500 Subject: [PATCH] When modal is open, turn off body scrolling These inline styles are what bootstrap 4 does, discovered through reverse-engineering, although it uses a lot more abstraction to do it. (A ScrollHelper object that can do a lot more things). This behavior now matches Bootstrap modal behavior, and avoids some weird double scroll within scroll. --- app/javascript/blacklight-frontend/modal.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/app/javascript/blacklight-frontend/modal.js b/app/javascript/blacklight-frontend/modal.js index 1a78e99bbf..2a5047f859 100644 --- a/app/javascript/blacklight-frontend/modal.js +++ b/app/javascript/blacklight-frontend/modal.js @@ -57,6 +57,9 @@ import ModalForm from 'blacklight-frontend/modalForm' 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'; @@ -168,6 +171,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) { @@ -179,6 +188,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() {