I am trying to get this modal script to work, but for some reason only the first div opens and closes pretty sure it has something to do with php. This code is copied from w3schools and has been edited.
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">×</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";
}
}