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

你试图用id =＆＃34; myModal＆＃34;来操纵元素。使用您的JavaScript。但我还没有在你的模态内容中找到这个元素。应该是这样的：

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

只打开第一个模态

1 个答案: