jquery弹窗传值

基础概念

jQuery 弹窗通常是指使用 jQuery 库来创建和管理弹出窗口（如对话框、提示框等）。这些弹窗可以用于显示信息、收集用户输入或进行交互操作。

优势

轻量级：jQuery 本身是一个轻量级的 JavaScript 库，适合快速开发。
易用性：jQuery 提供了丰富的 API，使得创建和管理弹窗变得非常简单。
兼容性：jQuery 兼容多种浏览器，确保在不同环境下都能正常工作。
丰富的插件：有许多第三方插件可以扩展 jQuery 的功能，如 jQuery UI、SweetAlert 等。

类型

模态弹窗（Modal Dialog）：阻止用户与页面其他部分交互，直到弹窗关闭。
非模态弹窗（Non-modal Dialog）：允许用户在弹窗打开时与页面其他部分交互。
提示框（Alert/Confirm/Prompt）：用于显示简单的信息或获取用户输入。

应用场景

表单验证：在用户提交表单前显示错误信息或确认信息。
用户通知：向用户显示重要信息或警告。
交互操作：在用户执行某些操作时显示确认对话框。

示例代码

以下是一个使用 jQuery 和 SweetAlert 插件创建模态弹窗并传递值的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 弹窗传值示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert@2.1.2/dist/sweetalert.min.js"></script>
</head>
<body>
    <button id="showModalBtn">显示弹窗</button>

    <script>
        $(document).ready(function() {
            $('#showModalBtn').click(function() {
                // 传递值到弹窗
                var message = "这是一个示例消息";
                var title = "提示";

                // 使用 SweetAlert 显示弹窗
                swal({
                    title: title,
                    text: message,
                    icon: "info",
                    buttons: true,
                    dangerMode: false,
                }).then((willDelete) => {
                    if (willDelete) {
                        swal("删除操作已确认！", {
                            icon: "success",
                        });
                    } else {
                        swal("删除操作已取消！");
                    }
                });
            });
        });
    </script>
</body>
</html>