js中怎么设置多个弹框

在JavaScript中设置多个弹框的方法包括使用window.alert()、window.confirm()、window.prompt()、自定义模态框。 这些方法各有特点，可以根据不同的需求选择合适的方式。下面将详细描述其中一种常用的方式——自定义模态框，并介绍如何实现多个弹框的功能。

一、使用window.alert(), window.confirm(), window.prompt()弹框

JavaScript中最基本的弹框方法是window.alert(), window.confirm(), 和 window.prompt()。这些方法简单易用，但不适合复杂的交互场景。

window.alert()

alert("这是一个简单的警告框");

window.confirm()

let result = confirm("你确定要继续吗?");
if (result) {
    alert("用户点击了确定");
} else {
    alert("用户点击了取消");
}

window.prompt()

let userInput = prompt("请输入你的名字", "默认值");
alert("你输入的名字是: " + userInput);

二、自定义模态框

对于更复杂的交互需求，自定义模态框是更好的选择。下面是一个如何在HTML和CSS中创建自定义模态框，并使用JavaScript控制其显示和隐藏的示例。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义模态框</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="openModal1">打开第一个模态框</button>
    <button id="openModal2">打开第二个模态框</button>
    <div id="modal1" class="modal">
        <div class="modal-content">
            <span class="close" data-modal="modal1">&times;</span>
            <p>这是第一个模态框的内容</p>
        </div>
    </div>
    <div id="modal2" class="modal">
        <div class="modal-content">
            <span class="close" data-modal="modal2">&times;</span>
            <p>这是第二个模态框的内容</p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分

/* styles.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);
    padding-top: 60px;
}
.modal-content {
    background-color: #fefefe;
    margin: 5% 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;
}

JavaScript部分

// script.js
document.getElementById('openModal1').onclick = function() {
    document.getElementById('modal1').style.display = "block";
};
document.getElementById('openModal2').onclick = function() {
    document.getElementById('modal2').style.display = "block";
};
document.querySelectorAll('.close').forEach(function(element) {
    element.onclick = function() {
        let modalId = this.getAttribute('data-modal');
        document.getElementById(modalId).style.display = "none";
    };
});
window.onclick = function(event) {
    let modals = document.querySelectorAll('.modal');
    modals.forEach(function(modal) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    });
};

三、使用第三方库

如果需要更强大和丰富的功能，可以使用一些第三方库，如SweetAlert、Bootstrap等。

使用SweetAlert

// 引入SweetAlert库
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
    document.getElementById('openModal1').onclick = function() {
        Swal.fire('这是第一个模态框');
    };
    document.getElementById('openModal2').onclick = function() {
        Swal.fire('这是第二个模态框');
    };
</script>

使用Bootstrap

<!-- 引入Bootstrap库 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- HTML部分 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
    打开第一个模态框
</button>
<div class="modal" id="modal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">第一个模态框</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                这是第一个模态框的内容
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal2">
    打开第二个模态框
</button>
<div class="modal" id="modal2">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">第二个模态框</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                这是第二个模态框的内容
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

四、总结

在JavaScript中设置多个弹框的方法包括使用window.alert()、window.confirm()、window.prompt()、自定义模态框。 其中，自定义模态框能够提供更强大的功能和更好的用户体验。通过结合HTML、CSS和JavaScript，可以轻松实现多个自定义模态框。对于更复杂的需求，可以考虑使用第三方库，如SweetAlert和Bootstrap，这些库提供了丰富的功能和良好的兼容性。对于团队管理和项目协作，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们能够高效地帮助团队管理项目和任务。