Question

我试图创建多个模态来显示不同的数据。我看了其他的例子（堆栈溢出），并实现了代码，它仍然不适合我。基本上在这一点上，我只是想让它工作并将脚本从WW3 Schools网页上复制下来。我有两个例子......一个只有一个模态（可以工作），然后第二个有两个模态（它应该显示不同的数据（不起作用）。但是当我删除第一个模态时，第二个模态有效.Ive包括整个页面以防万一它是另一个问题，我也检查了元素，并说它没有错误。我希望你能帮助我！

第一个示例，包含一个模态（有效）。

 $ ./launcher-noheader.sh 
-------------------------------------------------------------------------------
| homepage | uri                                    | title_with_language_tag |
===============================================================================
| "1"      | <http://website.com/ns#ciao.ronda.com> | "this is the first"@en  |
| "2"      | <http://website.com/ns#miao.ronda.it>  | "this is the second"@en |
| "3"      | <http://website.com/ns#bao.ronda.uk>   | "this is the third"@en  |
-------------------------------------------------------------------------------

我的第二个有两个模态的例子如下。（不起作用）

 <!DOCTYPE html>
<html lang="en">
<head>
    <title>Modals</title>
<style>
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

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

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
</style>
</head>
<body>
<h2>Modal Example</h2>

    <!-- Trigger/Open The Modal -->
    <button id="myBtn" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">Open Modal</button>

    <!-- The Modal -->
    <div id="myModal1" class="modal">

      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">×</span>
        <p>Some text in the Modal..</p>
      </div>

    </div>

    <script>
    // Get the modal
    var modal = document.getElementById('myModal1');

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    </script>



    </body>
    </html>

Answer 1

您正在覆盖为第一个模态定义的变量（btn，模态）和onlick事件。

您可以通过重命名第二个模态的变量来解决问题（例如：modal2，btn2等）。

此外，您应该定义一次window.onclick事件并检查每个模态，如下所示：

window.onclick = function(event) {
    if (event.target == modal2) {
        modal2.style.display = "none";
    }
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

这是一个快速的jsfiddle：https://jsfiddle.net/0yccvpng/

如何创建多个模态来显示不同的数据？

1 个答案: