Question

我在同一页面上有两种不同的模态。它们每个都被认为是具有不同内容的单独模态，供用户点击。

问题是尽管ID不同，但最重要的是镜像底部的内容。

是否有一种方法可以覆盖操作顺序？ ......或者是否有特定的JS来区分这两者？

以下是查看问题的快速版本： https://jsfiddle.net/anemnafair/Locnupay/2/

HTML

<body>
  <button id="btn1"><img src="#" alt="image1"></button>

  <div id="modal1" class="modal">

    <div class="modal-content">
      <span class="close"></span>

      <div class="modal-body">
        <p>Lorem ipsum.</p>
      </div>
   </div>
 </div>

第二个模态HTML

<button id="btn2"><img src="#" alt="image2"></button>

<div id="modal2" class="modal">

 <div class="modal-content">
   <span class="close"></span>

       <div class="modal-body">
          <p>Lorem ipsum.</p>
       </div>
    </div>
  </div>
</body>

JS

   var modal = document.getElementById('modal1');
   var btn = document.getElementById("btn1");
   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";
   }
 }

Second Modal JS

  var modal = document.getElementById('modal2');
  var btn = document.getElementById("btn2");
  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";
  }
}

我从W3获得了大部分代码 - http://www.w3schools.com/howto/howto_css_modals.asp 不确定这是否有帮助。

我需要让每个模态单独行动而不是模仿另一个模态。那个问题我已经用完了下一步去哪里的线索？我只需要建议。

模态：操作顺序镜像多个模态的错误

0 个答案: