From 03ca44671d5eadf02ee96b9d0f68f72de1fced67 Mon Sep 17 00:00:00 2001 From: Jonathan Rochkind Date: Thu, 21 Nov 2024 14:31:07 -0500 Subject: [PATCH] Let a click on backdrop behind modal close the modal The greyed out background that is NOT the modal. Match bootstrap behavior where clicking on it will close the modal. --- app/javascript/blacklight/modal.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/app/javascript/blacklight/modal.js b/app/javascript/blacklight/modal.js index 03bee5bda..1deb457b0 100644 --- a/app/javascript/blacklight/modal.js +++ b/app/javascript/blacklight/modal.js @@ -148,13 +148,15 @@ const Modal = (() => { }; modal.setupModal = function() { - // Register both trigger and preserve selectors in ONE event handler, combining - // into one selector with a comma, so if something matches BOTH selectors, it - // still only gets the event handler called once. + // Register several click handlers in ONE event handler for efficiency + // + // * close button OR click on backdrop (modal.modalSelector) closes modal + // * trigger and preserve link in modal functionality -- if somethign matches both trigger and + // preserve, still only called once. document.addEventListener('click', (e) => { if (e.target.closest(`${modal.triggerLinkSelector}, ${modal.preserveLinkSelector}`)) modal.modalAjaxLinkClick(e) - else if (e.target.closest('[data-bl-dismiss="modal"]')) + else if (e.target.matches(`${modal.modalSelector}`) || e.target.closest('[data-bl-dismiss="modal"]')) modal.hide() }) };