dialog
I. Description
The HTML dialog element is used to display some sort of a small visual pop up to the user. To dismiss the dialog pop up element the user usually clicks a button in the dialog element which removes it from the web page.
The dialog element is usually used to create a pop up which alerts the user to information or prompts the user to input information into a form in the dialog element.
Dialog elements are generally used in conjunction with Javascript.
II. Examples
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
<style>
body form#email_discount_modal {
display: flex;
flex-direction: column;
width: 500px;
border: 1px solid black;
border-radius: 5px;
}
body form#email_discount_modal > * {
margin-bottom: 10px;
}
body form#email_discount_modal > *:last-child {
margin-bottom: 0;
}
.row {
display: flex;
flex-direction: row;
}
</style>
</head>
<body>
<h1>Dialog Example</h1>
<dialog open>
<form id="email_discount_modal" action="/api/email/discount_code_signup" method="dialog">
<h2>Enter Your Email For A Discount Code</h2>
<p>
Enter your email into the form below and click submit to receive
a discount code which will give you 10% off your next order.
Exclusions apply. See full terms and conditions by clicking the
link below.
</p>
<label for="email">Email</label>
<input type="email" id="email" name="email"/>
<div class="row">
<input type="checkbox" id="data_consent" name="data_consent">
<label for="data_consent">I consent to sharing my email address</label>
</div>
<button type="submit">Submit</button>
<button type="close">Close</button>
<a href="/terms_and_conditions/discount_code">Terms and Conditions</a>
</form>
</dialog>
</body>
</html>