How to create a dialog box or window in HTML ?

Last Updated : 05 Jun, 2020

In this article, we will create a dialog box or window using the <dialog> tag in the document. This tag is used to create popup dialog and models on a web page. This tag is new in HTML5.

Syntax:

<dialog open> Contents... </dialog>

Example 1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to define a dialog  
        box or window? 
    </title> 
  
    <style> 
        dialog { 
            color: green; 
            font-size: 30px; 
            font-weight: bold; 
            font-style: italic; 
        } 
  
        body { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1> 
        <dialog> tag 
    </h1> 
    <dialog open> 
        Welcome to GeeksforGeeks 
    </dialog> 
</body> 
  
</html>               

Output:
dialog tag

Example 2:

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <title> 
        How to define a dialog 
        box or window? 
    </title> 
  
    <style> 
        table, 
        th, 
        td { 
            border: 1px solid red; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h2>GeeksForGeeks</h2> 
        <h2> 
            How to define a  
            dialog box or window 
        </h2> 
          
        <dialog open> 
            This is an open dialog window 
        </dialog> 
    </center> 
</body> 
  
</html> 