How to display a dialog box in the page ?

Last Updated : 24 May, 2023

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

Approach:

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>