僅打開第一個模態

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');
}