<button aria-label="Open modal" id="openModal" type="button" class="if button">
  Open modal
</button>
<div class="if backdrop"></div>
<div
  aria-modal="true"
  role="dialog"
  aria-labelledby="modal-title"
  aria-describedby="modal-description"
  class="if modal"
>
  <div class="if title" id="modal-title">
    Title<button
      type="button"
      class="if close"
      aria-label="Close modal"
    ></button>
  </div>
  <span class="if axe sr-only" id="modal-description"
    >This is a modal that..</span
  >
  <div class="if content">
    <p class="if">
      Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates
      don’t eat the tourists. God creates dinosaurs. God destroys dinosaurs. God
      creates Man. Man destroys God. Man creates Dinosaurs. What do they got in
      there? King Kong? Forget the fat lady! You're obsessed with the fat lady!
      Drive us out of here!
    </p>

    <p class="if">
      Hey, you know how I'm, like, always trying to save the planet? Here's my
      chance. They're using our own satellites against us. And the clock is
      ticking. God help us, we're in the hands of engineers. They're using our
      own satellites against us. And the clock is ticking.
    </p>
    <a
      class="if external-link"
      target="_blank"
      rel="noopener noreferrer"
      href="https://google.com"
      >An external link</a
    >
    <a
      class="if external-link"
      target="_blank"
      rel="noopener noreferrer"
      href="https://google.com"
      >An external link</a
    >
  </div>
</div>

<script src="/assets/modal.iife.js"></script>
<script>
  const trigger = document.getElementById('openModal');
  const backdrop = document.querySelector('.if.backdrop');
  const modal = document.querySelector('.if.modal');
  const modalInstance = new IDSModal.Modal({ trigger, backdrop, modal });
</script>