<dialog>: The HTML Dialog Element

<dialog>
TypeElement
LanguageHTML
Language Version5

1 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.

2 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>

This document was last updated: