<button id="button">Open dialog</button>
<dialog id="modal">
<form action="">
<small>Try navigating through inputs using TAB key</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>
<input style="opacity:0;" value="This is here just as a hack to keep focus remain inside Codepen's iframe"/>
dialog {
background-color: rgb(255, 255, 255);
}
dialog[open]:not(:focus-within) {
background-color: rgb(255, 255, 254);
transition: background-color 0.01s ease;
}
/* 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();
};
modal.addEventListener("transitionend", e => {
modal.querySelector("input").focus();
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.