Dialog boxes and light boxes are widely used in websites and applications. Before that, they need to be customized - use a series of < div > to create containers, set the CSS of dialog boxes to center them, and use Javascript event handlers to show / hide mode boxes.
Now, the browser has introduced a new < dialog > tab, which makes it easier to create dialog boxes and light boxes. With Javascript, you can call methods to open or close the dialog box, or know when the dialog box closes through events.
Using the < dialog > tag, it is expected that the workload of creating modal boxes can be reduced by 50%.
demonstration
Demo #1
This demo shows a dialog box that displays some information to the user.
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML <dialog> : Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin: 0px;
font-family: Roboto, Tahoma;
font-size: 14px;
}
#simple-dialog {
width: 500px;
border: 1px solid #555555;
}
#simple-dialog::backdrop {
background: rgba(0,0,0,0.5);
}
#show-dialog-button {
background-color: white;
color: #336699;
cursor: pointer;
padding: 10px;
font-family: inherit;
font-size: inherit;
border: 2px solid #336699;
font-weight: 700;
display: block;
width: 200px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="main-container">
<dialog id="simple-dialog">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</dialog>
<button id="show-dialog-button">See Instructions</button>
</div>
<script>
document.querySelector("#show-dialog-button").addEventListener('click', function() {
document.querySelector("#simple-dialog").showModal();
});
</script>
</body>
</html>Demo #2
The demo displays a form in a dialog box.
<!DOCTYPE html>
<html>
<head>
<title>HTML <dialog> with Form : Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin: 0px;
font-family: Roboto, Tahoma;
font-size: 14px;
}
#form-dialog {
width: 500px;
border: 1px solid #555555;
}
#form-dialog::backdrop {
background: rgba(0,0,0,0.5);
}
#form-dialog form {
}
.form-element {
margin: 0 0 30px 0;
}
.form-element label {
display: block;
width: 100%;
margin: 0 0 5px 0;
}
.form-element input[type="text"] {
display: block;
width: 100%;
font-size: inherit;
font-family: inherit;
padding: 10px;
border: 1px solid #cccccc;
outline: none;
box-sizing: border-box;
}
.form-element select {
display: block;
width: 100%;
font-size: inherit;
font-family: inherit;
padding: 10px;
border: 1px solid #cccccc;
background-color: white;
outline: none;
box-sizing: border-box;
}
.form-element textarea {
display: block;
width: 100%;
font-size: inherit;
font-family: inherit;
padding: 10px;
border: 1px solid #cccccc;
outline: none;
resize: none;
height: 200px;
box-sizing: border-box;
}
#submit-button {
background-color: #336699;
color: white;
cursor: pointer;
padding: 10px 15px;
font-family: inherit;
font-size: inherit;
border: none;
font-weight: 700;
display: inline-block;
vertical-align: middle;
margin: 0 30px 0 0;
}
#close-button {
background-color: white;
cursor: pointer;
font-family: inherit;
font-size: inherit;
border: none;
display: inline-block;
vertical-align: middle;
}
#fill-form-button {
background-color: white;
color: #336699;
cursor: pointer;
padding: 10px;
font-family: inherit;
font-size: inherit;
border: 2px solid #336699;
font-weight: 700;
display: block;
width: 200px;
margin: 50px auto;
}
#form-status {
text-align: center;
font-weight: 700;
}
</style>
</head>
<body>
<div id="main-container">
<dialog id="form-dialog">
<form>
<div class="form-element">
<label>Name</label>
<input type="text" name="name" />
</div>
<div class="form-element">
<label>Email</label>
<input type="text" name="email" />
</div>
<div class="form-element">
<label>Gender</label>
<select name="gender">
<option value="M">Male</option>
<option value="F">Female</option>
</select>
</div>
<div class="form-element">
<label>Address</label>
<textarea name="address"></textarea>
</div>
<button type="button" id="submit-button">Submit</button>
<button type="button" id="close-button">Close</button>
</form>
</dialog>
<button id="fill-form-button">Fill Form</button>
<div id="form-status"></div>
</div>
<script>
var SHOW_FORM_BUTTON = document.querySelector("#fill-form-button"),
DIALOG = document.querySelector("#form-dialog"),
FORM_SUBMIT_BUTTON = document.querySelector("#submit-button"),
FORM_CANCEL_BUTTON = document.querySelector("#close-button"),
FORM_STATUS = document.querySelector("#form-status");
// show dialog
SHOW_FORM_BUTTON.addEventListener('click', function() {
DIALOG.showModal();
});
// form submission is cancelled
FORM_CANCEL_BUTTON.addEventListener('click', function() {
DIALOG.close('CANCELLED');
});
// when form is submitted
FORM_SUBMIT_BUTTON.addEventListener('click', function() {
// write code here for form submission with ajax
// when ajax form submission is successful
DIALOG.close('SUBMITTED');
});
// fired when dialog is closed
DIALOG.addEventListener('close', function() {
if(DIALOG.returnValue === 'SUBMITTED')
FORM_STATUS.textContent = 'Form is submitted';
else if(DIALOG.returnValue === 'CANCELLED')
FORM_STATUS.textContent = 'Form submission is cancelled';
});
// cancel effect of ESC key
DIALOG.addEventListener('cancel', function(e) {
e.preventDefault();
});
</script>
</body>
</html>< dialog > HTML tag
The < dialog > element can be used to create pop-up windows or mode boxes.
<!-- simple dialog --> <dialog> <p>Hello world !</p> </dialog>
<!-- dialog with form --> <dialog> <form method="dialog"> <label>Name</label> <input type="text" name="name" /> <button>Submit</button> </form> </dialog>
open a dialog box
The showModal method opens a dialog box.
<dialog id="modal-dialog"> <p>Hello world !</p> </dialog>
document.querySelector("#modal-dialog").showModal()
close dialog boxes
The close method closes a dialog box.
document.querySelector("#modal-dialog").close()
In addition, you can pass parameters to the close method. This value can be accessed through the returnValue property of the dialog box.
document.querySelector("#modal-dialog").close('SUBMITTED');
// outputs 'SUBMITTED'
console.log(document.querySelector("#modal-dialog").returnValue);Know when the dialog box closes
A close event is triggered when the dialog box is closed. Use it to write code in event handlers.
var DIALOG = document.querySelector("#modal-dialog");
// fired when dialog is closed
DIALOG.addEventListener('close', function() {
if(DIALOG.returnValue === 'SUBMITTED')
alert('Form is submitted');
else if(DIALOG.returnValue === 'CANCELLED')
alert('Form submission is cancelled');
});
// assuming form inside dialog was cancelled by user
DIALOG.close('CANCELLED');
// assuming form inside dialog was submitted successfully
DIALOG.close('SUBMITTED');Function of ESC key
By default, if the user presses the ESC key on the keyboard, the dialog box closes.
However, pressing the ESC key will also trigger a cancellation event. You can cancel the event so that the dialog box does not close when the ESC key is pressed.
// cancel effect of ESC key
document.querySelector("#modal-dialog").addEventListener('cancel', function(e) {
e.preventDefault();
});Add a background color to the dialog box
CSS:: backdrop selector can be used to display the background color when the dialog box opens.
#modal-dialog::backdrop {
background: rgba(0,0,0,0.5);
}conclusion
The < dialog > element eliminates most of the hard work behind creating custom dialog boxes or light boxes. This is indeed a very useful supplement.