Question

我的网页肌肉有问题。我想使用多个弹出式模态，但我似乎无法使其正常工作。有了这个代码，当我只使用一个模态时，它可以很好地工作，但是当我尝试添加第二个时，一切都会中断，我不知道我做错了什么。如果有人能指出我正确的方向，我会很高兴。感谢。

<div>
    <ul>
        <li> <div class="top_bar_menu" id="myBtn"> Our Story </div> </li>
        <li> <div class="top_bar_menu" id="myBtn-2"> Our Product </div> </li>
        <li> <a href="" class="top_bar_menu"> Our Team</a> </li>
    </ul>
</div>

<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
        <div class="modal-body">
            <div class="modalHeader"> Our Story </div> <br>
            <p>bla bla</p>
        </div>
    </div>
</div>

<div id="myModal-2" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
        <div class="modal-body">
            <div class="modalHeader"> Our Product </div> <br>
            <p>bla bla</p>
        </div>
    </div>
</div>

<script>
    var modal = document.getElementById('myModal');
    var modal = document.getElementById('myModal-2');

    var btn = document.getElementById("myBtn");
    var btn = document.getElementById("myBtn-2");

    var span = document.getElementsByClassName("close")[0];

    btn.onclick = function() {
        modal.style.display = "block";
    }

    span.onclick = function() {
        modal.style.display = "none";
    }

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    } 
</script>

打开多个模态时出错

0 个答案: