时间戳

首页 > 解决方案 > 我需要在一个网页中制作多个模式

javascript - 我需要在一个网页中制作多个模式

问题描述

我需要在 HTML 页面中制作多个模式，我可以制作一个可以正常工作的模式，但是当我制作另一个时它不起作用。

      <!-- The Modal -->
      <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
          <div class="modal-header">
          <span class="close">&times;</span>
            <h3>Edit Intro</h3>
            <h2></h2>
          </div>
          <div class="modal-body">
           <center><br> School/Collage<br><input type="text" name="" style="width:100%"><br><br>
            Degree<br><input type="text" name="" style="width:100%"><br><br>
            Field of study<br><input type="text" name="" style="width:100%"><br><br>
          Start Date<input type="date" name="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; End Date<input type="date" name=""><br><br>
          grade<br><input type="text" name="" style="width:100%"><br><br>
           Descrption<br><textarea cols="30%" rows="4%"></textarea>
          </div></center>

              <a href=""><button class="modalsave">Save</button></a>
              <a href=""><button class="modalcencel">Cencel</button></a>

        </div>

      </div>

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

                    // 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>

这一种模式有效，但是当我在同一页面上使用多个模式的代码时，顶部的模式有效，但后面的模式无效。

标签： javascripthtml

解决方案

模态字面意思是这样一个元素，它阻止对 UI 其余部分的访问，直到用户完成与它的交互并关闭它。因此，一次只有一个活动的模态（顶部）是正常的。

所以我猜你在这里真正要问的是 - 为什么你的代码一次不会显示多个弹出窗口。原因是这段代码不是通用的，并且引用了特定的 DOM 元素（#myModal其所有内容都作为弹出窗口包装器，#myBtn作为弹出窗口的触发器）并且只有.close元素是通用的（因此任何具有.close该类的 DOM 元素都可以起作用作为密切控制）。但同样，您只将点击处理程序附加到第一个找到的.close元素。因此，它只显示一个弹出窗口，因为您在页面上只有一个弹出窗口。

您需要概括该代码。

推荐阅读