jquery关闭模态框

原创

mob64ca12e1c36d 2023-08-20 05:17:23 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e1c36d的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现jquery关闭模态框的步骤

流程图

flowchart TD
    A[创建模态框] --> B[设置关闭按钮]
    B --> C[绑定关闭事件]
    C --> D[隐藏模态框]

步骤和代码解释

步骤一：创建模态框

首先，我们需要创建一个模态框的 HTML 元素，可以使用 <div> 标签，并添加一个唯一的 id 属性。

<div id="myModal" class="modal">
    <!-- 模态框内容 -->
</div>

步骤二：设置关闭按钮

在模态框内部，我们需要添加一个关闭按钮，用于触发关闭模态框的事件。可以使用 <button> 标签，并添加一个唯一的 id 属性。

<button id="closeBtn">关闭</button>

步骤三：绑定关闭事件

在 JavaScript 中，我们可以使用 jQuery 的 click() 方法来绑定关闭按钮的点击事件。在该事件处理程序中，我们将隐藏模态框。

$("#closeBtn").click(function() {
    $("#myModal").hide();
});

步骤四：隐藏模态框

最后，我们需要在页面加载完成后将模态框隐藏起来，以便用户在初始状态下看不到它。可以在 JavaScript 中使用 jQuery 的 $(document).ready() 方法来实现。

$(document).ready(function() {
    $("#myModal").hide();
});

完整代码

<!DOCTYPE html>
<html>
<head>
    <title>实现jquery关闭模态框</title>
    <script src="
    <style>
        .modal {
            /* 模态框样式 */
        }
    </style>
</head>
<body>
    <div id="myModal" class="modal">
        <!-- 模态框内容 -->
        <button id="closeBtn">关闭</button>
    </div>

    <script>
        $(document).ready(function() {
            $("#myModal").hide();

            $("#closeBtn").click(function() {
                $("#myModal").hide();
            });
        });
    </script>
</body>
</html>

该代码将创建一个模态框，并通过 jQuery 实现了关闭模态框的功能。你可以根据需要调整模态框的样式和内容，并使用该代码作为基础进行扩展和自定义，实现更复杂的交互效果。