Modern web browsers are constantly evolving with new technologies that help developers perform tasks faster. In this post we will learn about the HTML <dialog/> element.
In web development, when we want to display a pop-up dialog or modal, we usually resort to do that by writing some HTML and JavaScript code, or we resort to using a library such as Bootstrap, which is equipped with many ready-made tools including modals and popups.
However today browsers equipped with ready-made tag which is the <dialog /> tag. The <dialog /> tag enable us to display dialogs and modal boxes and has many advantages over the custom modals created with third-party libraries.
The <dialog /> html element comes with a javascript api which allows to manipulate the dialog such as showing, hiding and listening for events.
<dialog /> Javascript Methods:
- show(): display non modal dialog
- showModal(): dialog the dialog as modal
- close(): close the dialog box.
The difference between the show() and showModal() is that show() display dialog and allows interaction with the outside content as well. while showModal() display the dialog and doesn’t allow interaction with outside content and display a backdrop like custom-made modals.
Example:
<button>Show dialog</button>
<dialog>
<p>Are you sure you want to proceed</p>
<button>Ok</button>
<button autofocus>Close</button>
</dialog>
Javascript:
<script>
const showBtn = document.querySelector("#show");
const dialog = document.querySelector("dialog");
const closeBtn = document.querySelector("dialog button");
showBtn.addEventListener("click", () => {
dialog.show();
});
closeBtn.addEventListener("click", () => {
dialog.close();
});
</script>
In this code i added the content that i want to be displayed in the dialog wrapped in the <dialog /> tag along with a close button. You can add any arbitrary html inside dialog tags.Â
To process html <dialog /> by showing or hiding typically with javascript using the dedicated methods for dealing with dialogs.
As shown i takes a reference to the show button, the dialog and the close button using document.querySelector() function. Next i listened for the click event for the show button to display the modal using dialog.show(). And then closing the modal when click the close button using dialog.close().
Most notably about dialog.show() is that the dialog in this case is opened and allows interaction with the rest of the page like this figure.
However if you replaced the dialog.show() with dialog.showModal():
dialog.showModal()
The result as in this figure:
From this figure you see the differences between dialog and modals:
- modals accompanied by a backdrop when displaying the dialog as modal which prevent interaction with the rest of the page.
- Another difference about dialog.showModal() is the dialog is displayed centered on the screen.
- Pressing the esc key will dismiss the modal.
Example: simple form:
<button id="show">Show dialog</button>
<div id="output" style="margin-top: 5px;"></div>
<dialog>
<form>
<h4>Select product status</h4>
<p>
<input type="radio" name="status" value="active" />
<label>Active</label>
</p>
<p>
<input type="radio" name="status" value="pending" />
<label>Pending</label>
</p>
<p>
<input type="radio" name="status" value="expired" />
<label>Expired</label>
</p>
<button type="submit">Submit</button>
<button type="button">Close</button>
</form>
</dialog>
<script>
const showBtn = document.querySelector("#show");
const dialog = document.querySelector("dialog");
const submitBtn = document.querySelector("dialog button[type=submit]");
const closeBtn = document.querySelector("dialog button[type=button]");
const output = document.querySelector("#output");
// On click show
showBtn.addEventListener("click", () => {
dialog.showModal();
});
// On click close
closeBtn.addEventListener("click", () => {
dialog.close();
});
// On click submit
submitBtn.addEventListener("click", (e) => {
e.preventDefault();
dialog.close(document.querySelector('input[name="status"]:checked').value);
});
// Listen for the close event capture the return value
dialog.addEventListener("close", (e) => {
output.innerText = dialog.returnValue ? "You selected: " + dialog.returnValue : "";
});
</script>
In this code there is a button that will trigger the modal and a div#ouput that display the selected checkbox from the form. Inside the dialog i displayed a form with three checkboxes. I added two buttons, a submit button that submit the form and normal button to close the modal.
In the Javascript code we took a reference to the DOM nodes that we will use to manipulate the modal like the show modal button, the submit button and so on. Then i added the same logic as in the previous example to show and close the modal.
The most important thing here is how to capture return values from the modal when closing. This is done by listening on the submit button click event like so:
submitBtn.addEventListener("click", (e) => {
e.preventDefault();
dialog.close(document.querySelector('input[name="status"]:checked').value);
});
Here i invoked e.preventDefault() to prevent the default behavior of the submit button and then calling dialog.close(returnvalue) method to close the modal and passing whatever value we need, here i want to return the selected checked value.
Now to retrieve the return value we will listen on the close() event, this event fired whenever the modal is closed:
dialog.addEventListener("close", (e) => {
output.innerText = dialog.returnValue ? "You selected: " + dialog.returnValue : "";
});
As you see the dialog has a returnValue property that contains the return value. I set the return value to the div#output inner text. Note that when closing the modal by clicking close button the return value is empty.
Form Method=”dialog”
When working with forms inside of html <dialog /> you can provide method=”dialog” to the form like so:
<dialog> <form method="dialog"> </form> </dialog>
Using method=”dialog” in the form makes the form dismissed whenever clicking the submit button. In other works the submit button will act as close button. When a form’s method is dialog, the state of the form is persisted but not submitted, and the dialog gets closed.
Example: Form with required validation:
<button id="show">Show dialog</button>
<dialog>
<form method="dialog">
<h4>Create new account</h4>
<p>
<label>Username</label>
<input type="text" name="username" value="" required />
</p>
<p>
<label>Email</label>
<input type="email" name="email" value="" required />
</p>
<p>
<label>Password</label>
<input type="password" name="password" value="" required />
</p>
<button type="submit">Submit</button>
<button type="button">Close</button>
</form>
</dialog>
<script>
const showBtn = document.querySelector("#show");
const dialog = document.querySelector("dialog");
const submitBtn = document.querySelector("dialog button[type=submit]");
const closeBtn = document.querySelector("dialog button[type=button]");
showBtn.addEventListener("click", () => {
dialog.showModal();
});
closeBtn.addEventListener("click", () => {
dialog.close();
});
</script>
In this form i added three input fields with the required attribute. Now if you click the submit button as mentioned above it supposed to close the form due to form method=”dialog”, however the form won’t close unless you fill all the required fields or close the dialog programmatically:
submitBtn.addEventListener("click", (e) => {
e.preventDefault();
dialog.close();
});
Another method to close the dialog is by using formnovalidate attribute on the submit button:
<button type="submit" formnovalidate>Submit</button
Styling HTML <dialog />
HTML <dialog /> can be styled to create a nice looking modals:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Styling Dialog</title>
<style>
dialog {
border: 3px solid #ccc;
border-radius: 5px;
padding: 0px 24px 20px;
width: 408px;
font-family: Arial, sans-serif;
}
dialog h4 {
font-size: 20px;
color: #2f8975;
}
dialog p {
display: flex;
justify-content: space-between;
}
dialog input[type=text], dialog input[type=email], dialog input[type=password] {
font-size: 15px;
padding: 6px;
border: 2px solid #ccc;
outline: none;
}
dialog button {
font-size: 19px;
border-radius: 7px;
padding: 7px;
}
dialog button[type="submit"] {
background: #c4edc5;
border: 3px solid #639d63;
}
dialog button[type="button"] {
background: #db8e70;
border: 3px solid #cf2f1e;
}
dialog::backdrop {
background-color: red;
opacity: 0.3;
}
</style>
</head>
<body>
<button id="show">Show dialog</button>
<dialog>
<form method="dialog">
<h4>Create new account</h4>
<p>
<label>Username</label>
<input type="text" name="username" value="" required />
</p>
<p>
<label>Email</label>
<input type="email" name="email" value="" required />
</p>
<p>
<label>Password</label>
<input type="password" name="password" value="" required />
</p>
<button type="submit" formnovalidate>Submit</button>
<button type="button">Close</button>
</form>
</dialog>
</body>
</html>
<script>
const showBtn = document.querySelector("#show");
const dialog = document.querySelector("dialog");
const submitBtn = document.querySelector("dialog button[type=submit]");
const closeBtn = document.querySelector("dialog button[type=button]");
showBtn.addEventListener("click", () => {
dialog.showModal();
});
closeBtn.addEventListener("click", () => {
dialog.close();
});
</script>
