p
  button(type='button' data-js='toggle-modal' aria-controls='my-modal' id='trigger-open') Open modal
p
  label(for='input-text') Please do not fill this in
  input(id='input-text')
p
  label(for='input-textarea') Or this one
  textarea(id='input-textarea' cols='20' rows='5') I certainly hope this textarea doesn't fall into focus while the modal popup is open
p
  a(href='https://www.bbc.co.uk/' target='_blank') Here's one of those links all the kids go on about

dialog(id='my-modal')
  p
    button(type='button' data-js='toggle-modal' aria-controls='my-modal' id='trigger-open') Close modal
  h1 You have opened a modal popup
  p Take a apple, while you're here. Just one, though.
  P 🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎
  p
    a(href='https://www.bbc.co.uk/' target='_blank') Another link
  p
    label(for='input-email') I don't care what your email address is
    input(id='input-email' type='email')
 
p
  button I guess you should submit this

// Just some basic boilerplate
:root {
  --dark: #111;
  --light: #eee;
}

dialog {
  &::backdrop {
   background-color: rgb(100 100 100 / 0.5);
  }
}

body, dialog {
  background: var(--light);
  color: var(--dark);
}

@media (prefers-color-scheme: dark) {
  body, dialog {
    background: var(--dark);
    color: var(--light);
  }
  
  a {
    color: #99f;
    
    &:visited {
      color: #f9f;
    }
  }
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

button, input, textarea {
  display: block;
  font-family: inherit;
}

*:focus {
  outline: solid 0.2em red;
}

const clickHandler = (event: Event) => {
  const trigger = event.target as HTMLElement;
  const triggerType = trigger.getAttribute('data-js');

  // The user wants to open or close a modal popup
  if (triggerType && triggerType === 'toggle-modal') {
    const modalID = trigger.getAttribute('aria-controls');
    if (!modalID) return;
    const modal = document.getElementById(modalID) as HTMLDialogElement;
    if (!modal) return;
    if (modal.hasAttribute('open')) {
      // Because the modal in question is a `dialog` element, we can
      // call the built-in functions
      modal.close();  
    } else {
      modal.showModal();
    }
  }  
};

const init = () => {
  window.addEventListener('click', clickHandler);
};

init();