通过jQueryUI在页面中显示一个对话框

在这篇文章中，我们将看到，我们如何在我们的网页上实现一个对话框，以进行一些特定的操作。这可以通过jQueryUI来实现，jQueryUI是一个由各种造型组件、部件、效果、主题等组成的集合，可以与jQuery一起使用。

jQueryUI CDN链接：在HTML文件的头部标签中添加以下链接。

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

步骤:

我们将创建一个按钮并实现一个负责打开对话框的函数。
在对话框中，我们将有一个close按钮和一个ok按钮，点击其中任何一个都会关闭对话框。

示例:

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

输出:

如何在页面中显示一个对话框？