仅打开第一个模态

Question

我正在尝试让这个模态脚本工作，但由于某种原因，只有第一个div打开和关闭非常确定它与php有关。此代码是从 w3schools 复制的，并已经过编辑。

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))
{
?>

<!-- Modal content -->
<div class="modal-content">
  <div class="modal-header">
    <span class="close">&times;</span>
    <h2><?php echo($rij['naam']); ?></h2>
  </div>
  <div class="modal-body">
    <p><?php echo($rij['couponcode']); ?></p>
  </div>
  <div class="modal-footer">
    <h3><?php echo($rij['email']); ?></h3>
  </div>
 </div>

<?php
}
}
catch(PDOException $e)
{
    $sMsg = '<p>
            Regelnummer: '.$e->getLine().'<br/>
            Bestand: '.$e->GetFile().'<br/>
            Foutmelding: '.$e->getMessage().'
        </p>';
    trigger_error($sMsg);
}
$db=NULL;
?>

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

Answer 1

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

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