Dialog

A dialog displays in front of all other content on a webpage. The opening and closing of a dialog is event driven, and, therefore requires JavaScript code.

To open a dialog, use the show() method.

To close a dialog, use the close() method.

A dialog allows a user to continue interacting with the background content while the dialog is open. For example, in the example below, you can select the text from the content.

Example of a Dialog (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>Course notes example code</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta http-equiv="Content-Language" content="en" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <script>
            addEventListener("load", (e) => 
            { 
                document.getElementById('simpleDialog').show()
            })
        </script>
    </head>
    
    <body>
        <div>Some text on the webpage</div>
        <dialog id="simpleDialog">
            <div>Dialog content</div>
            <input type="button" value="Close" onClick="document.getElementById('simpleDialog').close()"/>
        </dialog>
    </body>
</html>

Dialogs allow you to interact with the background content. Test that you can select the webpage background text in the above example.

Adjust the code in the above example to open the dialog using a button, as shown here.

ClosedBy

The closedBy property determines which events can close a dialog. The closedBy property can have any of the following three values:

any: The dialog will close if the user clicks on the background, hits the ESC key or as a response to some event that has been coded into the dialog (in the examples in these notes, the event that has been coded into the dialog is the user clicking on the "Close" button in the dialog).
closeRequest: The dialog will close if the user hits the ESC key or as a response to some event that has been coded into the dialog (in the examples in these notes, the event that has been coded into the dialog is the user clicking on the "Close" button in the dialog).
The dialog will not close if the user clicks on the background.
none (default value): The dialog will only close as a response to some event that has been coded into the dialog (in the examples in these notes, the event that has been coded into the dialog is the user clicking on the "Close" button in the dialog).
The dialog will not close if the user clicks on the background or hits the ESC key.

The example below sets the value of closedBy to any.

Example of closedBy="any" (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>Course notes example code</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta http-equiv="Content-Language" content="en" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    </head>
    
    <body>
        <div>Some text on the webpage</div>
        <input type="button" value="Open Dialog" onClick="document.getElementById('dialog').show()"/>        
        <dialog id="dialog" closedBy="any">
            <div>Dialog content</div>
            <input type="button" value="Close" onClick="document.getElementById('dialog').close()"/>
        </dialog>
    </body>
</html>

Adjust the code above, so that the closedBy property is set to "closeRequest", as shown here. Check that the user can no longer click on the background to close the dialog.

Adjust the code above, so that the closedBy property is set to "none", as shown here. Check that the user can no longer click on the background or hit the ESC key to close the dialog.

Adjust the code above, so that the closedBy property is removed, as shown here. In this case, closedBy property should use the default value of "none". Check that the user can no longer click on the background or hit the ESC key to close the dialog.

Modal

A modal is a dialog that blocks all user interaction with the background content while the dialog is open.

A dialog becomes a modal if is opened using the showModal() method (rather than the show() method).

The default closedBy property value for a modal is closeRequest.

In website development, we usually use a modal rather than a dialog, because a modal blocks a user from interacting with the background content while the modal is open.

Example of a modal (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>Course notes example code</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta http-equiv="Content-Language" content="en" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
        <div>Some text on the webpage</div>
        <input type="button" value="Open Modal" onClick="document.getElementById('modal').showModal()"/> 

        <dialog id="modal">
            <div>Modal content</div>            
            <input type="button" value="Close" onClick="document.getElementById('modal').close()"/>
        </dialog>
    </body>
</html>

A modal blocks a user from interacting with the background content while a modal is open. Test this by trying to select the webpage background text in the above example.

The default closedBy property value for a modal is "closeRequest". Test the code above to see that the modal closes if the user hits the ESC key or clicks on the "Close" button.

::Backdrop

The ::backdrop pseudo-element occupies the full screen and is rendered immediately beneath a dialog. We can use this to form a semi-transparent background between the modal and the website's content.

Example of using ::backdrop (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>Course notes example code</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta http-equiv="Content-Language" content="en" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            dialog::backdrop
            {
                background-color:rgba(230, 230, 230, 0.7);
            }
        </style>
    </head>

    <body>
        <div>Some text on the webpage</div>
        <input type="button" value="Open Modal" onClick="document.getElementById('modal').showModal()"/> 
        
        <dialog id="modal">
            <div>Modal content</div>
            <input type="button" value="Close" onClick="document.getElementById('modal').close()"/>
        </dialog>
    </body>
</html>

Change the code above, so that the ::backdrop color has a green tint, as shown here.

Return Value

To return a value from a dialog or a modal, pass it as a parameter with the button click event that called the event. The example below shows this.

Example of using the return value from a modal (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>Course notes example code</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta http-equiv="Content-Language" content="en" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script>
            closeModal = (value) =>
            {
                alert(value)
                document.getElementById('modal').close()
            }
        </script>
    </head>

    <body>
        <div>Some text on the webpage</div>
        <input type="button" value="Open Modal" onClick="document.getElementById('modal').showModal()"/> 

        <dialog id="modal">
            <div>Dialog content</div>
            <input type="button" value="Accept" onClick="closeModal(this.value)"/>
            <input type="button" value="Decline" onClick="closeModal(this.value)"/>          
        </dialog>
    </body>
</html>