Create Modal Windows with HTML Dialog Tag

Introduction

In this lab, you will learn how to use the HTML <dialog> tag to create a modal window or a pop-up on a webpage. We will guide you through the step-by-step process of creating a sample dialog box with the help of <dialog> tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70742{{"`HTML Dialog Box/Window`"}} html/head_elems -.-> lab-70742{{"`HTML Dialog Box/Window`"}} html/text_head -.-> lab-70742{{"`HTML Dialog Box/Window`"}} html/para_br -.-> lab-70742{{"`HTML Dialog Box/Window`"}} html/forms -.-> lab-70742{{"`HTML Dialog Box/Window`"}} end

Adding the dialog tag in index.html

The <dialog> tag requires a start tag and an end tag. In this step, we will add the basic HTML structure and the <dialog> tag to the index.html file.

<!doctype html>
<html>
  <head>
    <title>Modal Window using HTML dialog tag</title>
  </head>
  <body>
    <h1>Modal Window using HTML dialog tag</h1>

    <!-- Adding the dialog tag -->
    <dialog>
      <p>This is a sample dialog box!</p>
    </dialog>
  </body>
</html>

Adding button to open the dialog

In this step, we will create a button to open the dialog box. We will use JavaScript to open and close the dialog box when the button is clicked.

<!doctype html>
<html>
  <head>
    <title>Modal Window using HTML dialog tag</title>
  </head>
  <body>
    <h1>Modal Window using HTML dialog tag</h1>

    <!-- Adding the dialog tag -->
    <dialog id="dialog">
      <p>This is a sample dialog box!</p>
    </dialog>

    <!-- Adding a button to open the dialog -->
    <button onclick="document.getElementById('dialog').showModal()">
      Open Dialog
    </button>

    <!-- Adding a button to close the dialog, which is hidden by default  -->
    <button onclick="document.getElementById('dialog').close()">
      Close Dialog
    </button>
  </body>
</html>

Adding CSS styling to the dialog

In this step, we will add some CSS styling to the dialog box, making it look more presentable.

<!doctype html>
<html>
  <head>
    <title>Modal Window using HTML dialog tag</title>

    <!-- Adding styles for the dialog box -->
    <style>
      dialog {
        width: 300px;
        height: 150px;
        background-color: #f2f2f2;
        padding: 20px;
        border: 2px solid #000;
        border-radius: 10px;
        box-shadow: 0px 0px 10px #000;
        font-family: Arial, san-serif;
        font-size: 18px;
        color: #000;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Modal Window using HTML dialog tag</h1>

    <!-- Adding the dialog tag -->
    <dialog id="dialog">
      <p>This is a sample dialog box!</p>
    </dialog>

    <!-- Adding a button to open the dialog -->
    <button onclick="document.getElementById('dialog').showModal()">
      Open Dialog
    </button>

    <!-- Adding a button to close the dialog, which is hidden by default  -->
    <button onclick="document.getElementById('dialog').close()">
      Close Dialog
    </button>
  </body>
</html>

Now our HTML code is complete for creating a modal window using HTML dialog tag.

Summary

You have successfully completed the lab on Creating a Modal Window using HTML dialog tag. In this lab, we discussed step-by-step the process of creating a sample dialog box using the HTML <dialog> tag. We added a simple button to open and close the dialog box with the help of JavaScript. Additionally, we also added some basic CSS styling to improve the appearance of the dialog box.

HTML Dialog Box/Window