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

在本文中，我们将看到如何在网页上为某些特定操作实现对话框。这可以通过 jQueryUI 实现，它是各种样式组件、小部件、效果、主题等的集合，可以与 jQuery 一起使用。

jQueryUI CDN 链接：在 HTML 文件的 head 标记中添加以下链接。

方法：

• 我们将创建一个按钮并实现一个负责打开对话框的函数。
• 在对话框中，我们将有一个关闭按钮和一个确定按钮，单击其中一个按钮将关闭对话框。

例子：

HTML

  

    
    
    
    
    
    
    
    
    
    
    * {
        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);
    }
    

  

    
    
        
              
Application Submitted successfully
  
        
        Submit Application
    
    
        
    //   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");
        });
    });
    

  

输出：