Javascript 仅打开第一个模态

我试图让这个模式脚本正常工作，但由于某些原因，只有第一个div打开和关闭，这与php有关。 此代码是从W3学校复制的，并已编辑

HTML/PHP：

<?php
try
{
$sQuery= "SELECT * FROM maillijst ORDER BY naam ASC";

$oStmt = $db->prepare($sQuery);
$oStmt->execute();

while($rij = $oStmt->fetch(PDO::FETCH_ASSOC))
{
?>

&时代；

JAVASCRIPT:

 <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";
        }
      }

//获取模态
var modal=document.getElementById（“myModal”）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

您尝试使用JavaScript操作id=“myModal”的元素。 但我还没有在你的模态内容中找到这个元素。 应该有这样的东西：

span.onclick = function() {
 $(this).closest('.modal-content').css('display', 'none');
}

---

你为什么怀疑php？你试过在没有php的情况下使用modal吗？我在javascript中没有看到任何html元素。我忘了在这个问题中加入我的第二个php部分…我试着像你说的那样更改span.onclick，但它似乎没有改变anything@E.dewilde你也可以回复上面的评论吗

 <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";
        }
      }

span.onclick = function() {
 $(this).closest('.modal-content').css('display', 'none');
}