How to display a dialog box in the page ?

Last Updated : 24 Jul, 2024

In this article, we are going to see how we can implement a dialog box on our webpage for certain actions. This can be implemented by using Several Methods.

Possible Approaches:

Using jQueryUI.
Using Cascading Style Sheets.

Explaining Each Approach:

Approach 1 - Using jQueryUI:

jQueryUI which is a collection of various kinds of styling components, widgets, effects, themes, and many more which can be used with jQuery.

jQueryUI CDN links: Add the following links in the head tag of the HTML file.

<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">

We will create a button and implement a function that will be responsible to open the dialog box.
In the dialog box, we will have a close button and an ok button, clicking on either of them will close the dialog box.

Example: In this example, we will use the above approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- jQuery theme for styling dialog box -->
    <link rel="stylesheet" 
          href=
"//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" />
    <!-- jQuery CDN link -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <!-- jQuery UI link for creating the dialog box -->
    <script src=
"https://code.jquery.com/ui/1.13.0/jquery-ui.js">
    </script>
    <!-- CSS code -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            height: 100vh;
            background-color: rgb(22, 22, 22);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        button {
            height: 40px;
            width: 150px;
            border-radius: 50px;
            border: none;
            outline: none;
            background-color: rgb(0, 167, 14);
        }

        button:hover {
            background-color: rgb(0, 131, 11);
        }
    </style>
</head>

<body>
    <!-- Content of the dialog box -->
    <div class="main">
        <div id="dialog" 
             title="Basic dialog">
            <p>Application Submitted successfully</p>
        </div>
        <button id="btn">Submit Application</button>
    </div>
    <script>
        //   jQuery Code
        $(function () {
            $("#dialog").dialog({
                // autoOpen will prevent the dialog 
                // box for opening automatically
                // on refreshing the page.
                autoOpen: false,
                buttons: {
                    OK: function () {
                        $(this).dialog("close");
                    },
                },
                title: "Application",
            });
            $("#btn").click(function () {
                $("#dialog").dialog("open");
            });
        });
    </script>
</body>
</html>

Output:

Approach 2 - Using Visibility Attribute in CSS:

Create a dialog box using HTML and CSS and set the visibility of dialog box as hidden initially.
Now write a function to change the visibility of dialog box using Javascript.
According to below code , The visibility of dialog box div is initially set to hidden and when we click on the Submit Application button changing the visibility to visible using Javascript function.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form with Submit Button</title>
    <script>
        function dialog()
        {
            let value = document.getElementById('bg')
            value.style.visibility = 'visible'
        }
    </script>
    <style>
        #bg{
            background-color: black;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            visibility: hidden;
        }
        #dialog{
            width: 30%;
            background-color: white;
            border-radius: 5%;
            padding: 1%;
        }
        #buttons{
            display: flex;
            justify-content: end;
            padding: 1%;
        }
        #buttons button{
            margin-left: 1%;
            width: 70px;
            height: 25px;
        }
        #submit{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
           margin-top: 15%;
        }
        #submit button{
            height: 40px;
            width: 150px;
            border-radius: 5px;
            background-color: rgba(1, 87, 1, 0.84);
            color: white;
        }
    </style>
</head>
<body>
   <div id="submit">
    <button id="btn" onclick="dialog()">Submit Application</button>
   </div>

  <div id="bg">
     <div id="dialog">
       <h3>Are You Sure??</h3><hr>
       <h5>Please Click on OK if you want to Contnue..</h5>
       <div id="buttons">
        <button style="color: red;">Cancel</button>
        <button style="color: green;">OK</button>
       </div>
     </div>
  </div>
    
</body>
</html>