javascript - 弹出框同时打开

Question

我有一堆图片，单击时会打开一个弹出框，其中包含有关所选图片的信息，但所有弹出框都会同时打开。 首先，我有一些

<ul class="cenas_top">
            <li>
                <div class="shape">
                    <a href="#ef" class="overlay round"></a>

                    <div class="details">
                        <span class="heading">Direção</span>
                        <hr />      
                        <!-- Trigger/Open The Modal -->
                        <button id="myBtn">Mais</button>
                    </div>

                    <div class="bg"></div>

                    <div class="base">
                        <img src=" alt="" />
                    </div>
                </div>  
                <h3>Name</h3>
            </li>
            <li>
                <div class="shape">
                    <a href="#fc" class="overlay round"></a>

                    <div class="details">
                        <span class="heading">Direção</span>
                        <hr />      
                        <!-- Trigger/Open The Modal -->
                        <button id="myBtn">Mais</button>
                    </div>

                    <div class="bg"></div>

                    <div class="base">
                        <img src=" alt="" />
                    </div>
                </div>  
                <h3>Name</h3>
            </li>
        </ul>

然后，我有盒子:

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

          <!-- Modal content-->
          <div class="modal-content" id="ef">
            <div class="modal-header">
              <span class="close">&times;</span>
              <h2></h2>
            </div>
            <div class="modal-body">
                <p>TEXT TEXT TEXT TEXT</p>
            </div>
            <div class="modal-footer">
            </div>
          </div>


          <!-- Modal content-->
          <div class="modal-content" id="fc">
            <div class="modal-header">
              <span class="close">&times;</span>
              <h2></h2>
            </div>
            <div class="modal-body">
                <p>TEXT TEXT TEXT TEXT</p>
            </div>
            <div class="modal-footer">
            </div>
          </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>

这里缺少什么？

Answer 1

您的代码存在几个问题，其中一些问题您在问题中没有提及，但无论如何都是显而易见的:

1) 所有模态内容都位于一个名为“myModal”的 div 中。单击该按钮后，该 div 可见。因此，其中的所有内容都将变得可见。您只需打开适用于单击的按钮的模态内容。

2) 所有按钮都有相同的id。这是无效的 HTML。元素 ID 必须是唯一的。就目前而言，只有您的第一个按钮才会响应单击事件。其他元素将被忽略，因为它们被视为无效元素。

3) 您仅将关闭事件添加到第一个span。因此，这对其他任何人都不起作用。

这是一个有效的示例。请注意每个按钮的 data-content 属性与相应模态的 id 之间的匹配。

HTML

    <ul class="cenas_top">
        <li>
            <div class="shape">
                <a href="#ef" class="overlay round"></a>

                <div class="details">
                    <span class="heading">Direção</span>
                    <hr />      
                    <!-- Trigger/Open The Modal -->
                    <button class="modal-button" data-content="ef">Mais</button>
                </div>

                <div class="bg"></div>

                <div class="base">
                    <img src=" alt="" />
                </div>
            </div>  
            <h3>Name</h3>
        </li>
        <li>
            <div class="shape">
                <a href="#fc" class="overlay round"></a>

                <div class="details">
                    <span class="heading">Direção</span>
                    <hr />      
                    <!-- Trigger/Open The Modal -->
                    <button class="modal-button" data-content="fc">Mais</button>
                </div>

                <div class="bg"></div>

                <div class="base">
                    <img src=" alt="" />
                </div>
            </div>  
            <h3>Name</h3>
        </li>
    </ul>

<!-- The Modals -->
    <div id="modal-ef" class="modal">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <span class="close">&times;</span>
          <h2></h2>
        </div>
        <div class="modal-body">
            <p>TEXT TEXT TEXT TEXT</p>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>      

    <div id="modal-fc" class="modal">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <span class="close">&times;</span>
          <h2></h2>
        </div>
        <div class="modal-body">
            <p>TEXT TEXT TEXT TEXT</p>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>

JavaScript

var showModal = function() {
  var modalID = this.getAttribute("data-content");
  var modal = document.getElementById('modal-' + modalID);
  modal.style.display = "block";
};

var hideModal = function() {
  this.parentElement.parentElement.parentElement.style.display = "none";
}

//event listeners to show the modals
var buttons = document.getElementsByClassName("modal-button");
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', showModal, false);
}

//event listeners to close the modals
var spans = document.getElementsByClassName("close");
for (var i = 0; i < spans.length; i++) {
  spans[i].addEventListener('click', hideModal, false);
}