https://grittybirds.com/wp-content/plugins/modal-builder-block/assets/js/app.js?ver=250322-205323

1// Get modal triggers.
2const modalTriggers = document.querySelectorAll('.htr-modal-trigger');
3// Get modal content windows.
4const modalContent = document.querySelectorAll('.htr-modal-content');
5// Get document body.
6const docBody = document.body;
7
8// Handling modal trigger.
9const handleModalTrigger = (trigger) => {
10  trigger.addEventListener('click', () => {
11    handleTriggerClick(trigger);
12  });
13};
14
15const handleTriggerClick = (trigger) => {
16  modalContent.forEach((contentNode) => {
17    if (contentNode.dataset.modalId === trigger.dataset.modalId) {
18      showModalWindow(contentNode);
19      hideModalViaCloseBtn(contentNode);
20      hideModalViaBg(contentNode);
21      hideModalViaEscape(contentNode);
22    }
23  });
24};
25
26// Handle Closing. (Break these up into smaller chunks.)
27const hideModalViaCloseBtn = (contentNode) => {
28  // Getting the Close Button from the content node.
29  const modalCloseButton = contentNode.querySelector(
30    '.htr-modal-content-close-btn'
31  );
32  // Hide modal on close button click.
33  modalCloseButton.addEventListener('click', () => {
34    hideModalWindow(contentNode);
35  });
36};
37
38const hideModalViaBg = (contentNode) => {
39  // Getting modal content background.
40  const modalContentBg = contentNode.querySelector(
41    '.htr-modal-content-background'
42  );
43  // Hide Modal on Background Click.
44  modalContentBg.addEventListener('click', () => {
45    hideModalWindow(contentNode);
46  });
47};
48
49const hideModalViaEscape = (contentNode) => {
50  // Hide modal on Escape key press.
51  document.addEventListener('keydown', (event) => {
52    const key = event.key;
53    if (key === 'Escape') {
54      hideModalWindow(contentNode);
55    }
56  });
57};
58
59const showModalWindow = (el) => {
60  el.classList.remove('htr-modal-content-hide');
61  el.classList.add('htr-modal-content-show');
62  docBody.classList.add('htr-modal-prevent-scroll');
63};
64
65const hideModalWindow = (el) => {
66  el.classList.remove('htr-modal-content-show');
67  el.classList.add('htr-modal-content-hide');
68  docBody.classList.remove('htr-modal-prevent-scroll');
69};
70
71// Looping over the triggers around the page. This could also be an object if we had more JS modules.
72modalTriggers.forEach((trigger) => {
73  handleModalTrigger(trigger);
74});