How to create a dialog box or window in HTML ?

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:

html

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

dialog tag

Example 2:

html

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

Output:

Supported Browsers are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

How to create a dialog box or window in HTML ?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to create Dialog Box in ReactJS?

In modern web development, creating interactive and user-friendly interfaces is essential. One common element found in many applications is a dialog box. A dialog box is a component that appears on top of the main content to display information, receive user input, or prompt for confirmation. In thi

How to create Dialog Box in ReactJS?

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. Material UI for React has this component available for us and it is very easy to integrate. We can create the dialog box in ReactJS using the following approach:Creating React Applic

How to Create Popup Box using HTML and CSS?

Popup boxes are widely used in web design, with nearly 80% of modern websites utilizing them for alerts, forms, confirmations, or user guidance. They enhance interactivity and improve user experience. Below are three common methods to create a popup box using only HTML and CSS:1. Using Display Prope

How to Create Browsers Window using HTML and CSS ?

The browser window is a tool to view the pages from the internet. It is used to search the content on the internet and get relevant information from the internet. Creating Structure: In this section, we will create a basic site structure and also attach the CDN link of the Font-Awesome for the icons

How to create Popup Box using HTML CSS and JavaScript?

Creating a popup box with HTML, CSS, and JavaScript improves user interaction on a website. A responsive popup appears when a button is clicked, featuring an HTML structure, CSS for styling, and JavaScript functions to manage visibility.ApproachCreate the Popup structure using HTML tags, Some tags a