jquery 消息弹窗

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。消息弹窗（通常指模态对话框）是一种用户界面元素，用于在不离开当前页面的情况下向用户显示信息、警告或确认。

类型

警告弹窗：用于提醒用户某些重要信息。
确认弹窗：用于获取用户的确认或选择。
提示弹窗：用于向用户提供额外的信息或指导。

应用场景

表单验证：在用户提交表单前，显示验证错误信息。
操作确认：在执行删除、更新等操作前，确认用户是否真的要执行。
提示信息：在用户完成某些操作后，显示成功或失败的信息。

示例代码

以下是一个使用 jQuery 和 Bootstrap 实现简单消息弹窗的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 消息弹窗示例</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    <button id="showAlert" class="btn btn-primary">显示警告弹窗</button>

    <!-- 消息弹窗 -->
    <div class="modal" tabindex="-1" role="dialog" id="alertModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">警告</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>这是一个警告消息弹窗！</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#showAlert').click(function() {
                $('#alertModal').modal('show');
            });
        });
    </script>
</body>
</html>