jquery 漂亮对话框

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。漂亮对话框（通常指模态对话框）是一种用户界面元素，它在当前页面上显示一个覆盖层，阻止用户与底层页面交互，直到对话框被关闭。

类型

模态对话框：阻止用户与底层页面交互，直到对话框关闭。
非模态对话框：允许用户在对话框打开的同时与底层页面交互。
警告对话框：用于显示警告信息。
确认对话框：用于获取用户确认。
提示对话框：用于获取用户输入。

应用场景

表单验证：在提交表单前显示确认对话框。
用户通知：向用户显示重要信息或警告。
设置选项：提供一个对话框让用户配置应用设置。
登录/注册：在页面上嵌入登录或注册对话框。

示例代码

以下是一个使用 jQuery 和 jQuery UI 创建模态对话框的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Dialog Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <style>
        #dialog {
            display: none;
        }
    </style>
</head>
<body>

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<button id="open-dialog">Open Dialog</button>

<script>
    $(function() {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true
        });

        $("#open-dialog").click(function() {
            $("#dialog").dialog("open");
        });
    });
</script>

</body>
</html>