<button id="button">Open dialog</button>

<dialog id="modal">
  <form action="">
    <small>Try navigating through inputs using TAB key (no focus trapping)</small>
    <p>

      <label>
          Username
          <input type="text" />
        </label>
    </p>
    <p>
      <label>
          Password
          <input type="password" />
        </label>
    </p>
    <p>

      <label><input type="checkbox" />Remember me</label>
    </p>

    <input type="submit" value="Login" />

  </form>
</dialog>
/* Polyfill for Dialog on FF, Safari etc */
.no-dialog dialog {
  display: none;
}

.no-dialog dialog[open] {
  display: block;
}
var isDialogSupported = true;
if (!window.HTMLDialogElement) {
  document.body.classList.add("no-dialog");
  isDialogSupported = false;
}

button.onclick = () => {
  if (isDialogSupported) {
    modal.showModal();
  } else {
    modal.setAttribute("open", "");
  }
  //   Focus first input when dialog opens
  modal.querySelector("input").focus();
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.