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=””></script>
<link rel=”stylesheet” href=”//”>


  • 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.



<!DOCTYPE html>
<html lang="en">
    <!-- jQuery theme for styling dialog box -->
    <link rel="stylesheet" 
"//" />
    <!-- jQuery CDN link -->
    <script src=
    <!-- jQuery UI link for creating the dialog box -->
    <script src=
    <!-- CSS code -->
    * {
        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);
    <!-- Content of the dialog box -->
    <div class="main">
        <div id="dialog" title="Basic dialog">
<p>Application Submitted successfully</p>
        <button id="btn">Submit Application</button>
    //   jQuery Code
    $(function() {
            // autoOpen will prevent the dialog 
            // box for opening automatically
            // on refresing the page.
            autoOpen: false,
            buttons: {
                OK: function() {
            title: "Application",
        $("#btn").click(function() {


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!