Open In App

How to create a dialog box or window in HTML ?

Last Updated : 05 Jun, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

Supported Browsers are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Similar Reads

Difference between window.location.href, window.location.replace and window.location.assign in JavaScript
Window.location is a property that returns a Location object with information about the document's current location. This Location object represents the location (URL) of the object it is linked to i.e. holds all the information about the current document location (host, href, port, protocol, etc.) All three commands are used to redirect the page t
4 min read
Onsen UI Dialog CSS Component Material Alert Dialog
Onsen UI is an HTML5 framework that allows you to design distinctive and usable user interfaces for free (UI). It also makes UI creation easier, enabling programmers to focus on the core of the product. Onsen UI is a complex set of user interface components designed specifically for mobile apps, with ready-to-use features that follow native iOS and
4 min read
Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons 2
Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Alert Dialog is used to display some warning messages with pop-ups on the webpage. Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons 2 is used to create the
2 min read
Onsen UI Dialog CSS Component Basic Alert Dialog
Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Alert Dialog is used to display some warning messages with pop-ups on the webpage. Onsen UI Dialog CSS Component Basic Alert Dialog is used to create the basic alert dialo
2 min read
Onsen UI Dialog CSS Component Alert Dialog without Title
Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Alert Dialog is used to display some warning messages with pop-ups on the webpage. Onsen UI Dialog CSS Component Alert Dialog without Title is used to create the alert dia
2 min read
Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons
Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Alert Dialog is used to display some warning messages with pop-ups on the webpage. Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons is used to create the a
2 min read
How to create a pop-up to print dialog box using JavaScript?
Given an HTML document and the task is to design a button that would pop-up a print dialog box. We are going to use JavaScript to do the assigned task: Approach:: Add a button which links to a JavaScript Function. Inside the JavaScript Function, use the JavaScript default function to call the print dialog box Syntax: window.print Example: &lt;!DOCT
2 min read
How to create custom dialog box with text input React Native?
React Native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. In this article, we are going to create a dialog with Text Input. To achieve this we will use React Native's built-in Modal component which we will use as a Dialog. There are two ways to create a React Native
3 min read
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 Application And Installing Module: Step 1: Create a Rea
2 min read
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 this article, we will explore how to create a dialog
2 min read