Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to display a dialog box in the page ?

  • Last Updated : 29 Oct, 2021

In this article, we are going to see that how we can implement a dialog box on our webpage for some 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, by clicking on either of them will close the dialog box.

Example:

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=
    </script>
    <!-- jQuery UI link for creating the dialog box -->
    <script src=
    </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 refresing the page.
            autoOpen: false,
            buttons: {
                OK: function() {
                    $(this).dialog("close");
                },
            },
            title: "Application",
        });
        $("#btn").click(function() {
            $("#dialog").dialog("open");
        });
    });
    </script>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!