https://betterstack.com/assets/common/modals-3906d5a2.js

1window.toggleModal = (id, event) => {
2  event?.preventDefault()
3
4  const toggle = (element) => {
5    document.body.classList.toggle('stop-scrolling')
6    element.classList.toggle('hidden')
7  }
8
9  const setupModal = (element) => {
10    if (!element) return; // Modal is not present on this page
11    if (element.toggle) return; // Modal was already setup, do not add more event listeners
12    element.toggle = () => { toggle(element) }
13
14    element.addEventListener('click', (e) => {
15      e.stopPropagation()
16      toggle(element)
17    })
18
19    element.querySelectorAll('[data-target="content"]').forEach((elem) => {
20      elem.addEventListener('click', (e) => {
21        e.stopPropagation()
22      })
23    })
24
25    element.querySelectorAll('[data-click="toggle"]').forEach((elem) => {
26      elem.addEventListener('click', (e) => {
27        e.preventDefault()
28        e.stopPropagation()
29        toggle(element)
30      })
31    })
32
33    // Attach event to document in order to receive events even if no element is focused
34    document.addEventListener('keyup', (e) => {
35      if (e.key === 'Escape' && !element.classList.contains('hidden')) {
36        e.preventDefault()
37        e.stopPropagation()
38        toggle(element)
39      }
40    })
41  }
42
43  document.addEventListener('turbo:load', function() {
44    const element = document.getElementById(id);
45    setupModal(element)
46  })
47
48  const element = document.getElementById(id);
49  if (!element) return;
50  setupModal(element)
51  toggle(element)
52}