<button
  aria-label="Open dialog"
  id="openDialog"
  type="button"
  class="if button"
>
  Open dialog
</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</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>
  </div>
  <div class="if footer">
    <button id="cancelButton" type="button" class="if button">Cancel</button>
    <button id="confirmButton" type="button" class="if button primary">
      Yes
    </button>
  </div>
</div>

<script src="/assets/dialog.iife.js"></script>
<script>
  const trigger = document.getElementById('openDialog');
  const cancelEl = document.getElementById('cancelButton');
  const confirmEl = document.getElementById('confirmButton');
  const cancelCallback = () => {
    console.log('cancel');
  };
  const confirmCallback = () => {
    console.log('confirm');
  };
  const backdrop = document.querySelector('.if.backdrop');
  const dialog = document.querySelector('.if.modal');
  const modalInstance = new IDSDialog.Dialog({
    trigger,
    backdrop,
    dialog,
    cancelEl,
    confirmEl,
    cancelCallback,
    confirmCallback,
  });
</script>