jQuery 多个弹出层的实现

在现代网页开发中，弹出层（Modal）是使用频率极高的组件之一。它可以用于显示消息、表单、或其他的内容。使用 jQuery 来实现多个弹出层可以非常方便。本文将介绍如何使用 jQuery 创建多个弹出层，并提供详细的代码示例和相关说明。

1. jQuery 弹出层的基础

弹出层通常是一个隐藏的 div 元素，通过 CSS 隐藏和显示。我们常用的方式是实现一个简单的弹出层，然后在这个基础上扩展出多个弹出层。以下是一个简单的弹出层的代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 弹出层示例</title>
    <link rel="stylesheet" href="style.css">
    <script src="
    <script src="script.js"></script>
</head>
<body>
    <button id="openModal1">打开弹出层 1</button>
    <button id="openModal2">打开弹出层 2</button>

    <div id="modal1" class="modal">
        <div class="modal-content">
            <span class="close" id="closeModal1">&times;</span>
            <p>这是第一个弹出层!</p>
        </div>
    </div>

    <div id="modal2" class="modal">
        <div class="modal-content">
            <span class="close" id="closeModal2">&times;</span>
            <p>这是第二个弹出层!</p>
        </div>
    </div>
</body>
</html>

CSS 部分

.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4); 
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

jQuery 代码

接下来，用 jQuery 来管理弹出层的显示和隐藏：

$(document).ready(function() {
    // 显示弹出层1
    $("#openModal1").click(function() {
        $("#modal1").css("display", "block");
    });
    // 关闭弹出层1
    $("#closeModal1").click(function() {
        $("#modal1").css("display", "none");
    });
    // 显示弹出层2
    $("#openModal2").click(function() {
        $("#modal2").css("display", "block");
    });
    // 关闭弹出层2
    $("#closeModal2").click(function() {
        $("#modal2").css("display", "none");
    });
    
    // 点击外部区域关闭弹出层
    $(window).click(function(event) {
        if (event.target.className === "modal") {
            $(event.target).css("display", "none");
        }
    });
});

2. 使用 Mermaid 制作旅行图

使用 mermaid 语法可以通过图形化的方式清晰展示模型结构。以下是一个简单的旅行过程图示：

journey
    title 旅行计划
    section 第一天
      到达目的地: 5: 旅客
      办理入住: 4: 旅客
    section 第二天
      游览博物馆: 5: 旅客
      享用晚餐: 3: 旅客
    section 第三天
      自由活动: 2: 旅客
      返回家园: 4: 旅客

结尾

通过上述的方法，我们可以很容易地实现在网页中使用 jQuery 显示多个弹出层。弹出层的实现并不仅限于简单的显示与隐藏，它们可以被进一步配置和扩展，用于更复杂的交互和信息展示。希望本文能帮助你更好地理解和使用jQuery 弹出层。如果你有进一步的问题或想法，欢迎随时进行交流！