<div id="my-dialog">
  <form>
    <input type="text" />
    <button id="close">Close</button>
  </form>
</div>
  #my-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px;
    background-color: white;
    border: 1px solid #ccc;
  }
const dialog = document.getElementById("my-dialog");
const closeButton = document.getElementById("close");

const watcher = new CloseWatcher();

watcher.onclose = () => {
  dialog.remove();
};

closeButton.addEventListener("click", () => {
  watcher.requestClose();
});

watcher.oncancel = (e) => {
  if (e.cancelable) {
    e.preventDefault();

    if (confirm("Are you sure you want to close?")) {
      watcher.close();
    }
  }
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.