如何使多个模态显示在while循环中？

Question

php/html:

<?php include 'connect.php';
$sql = "SELECT * FROM products WHERE featured = 1";
$featured = mysqli_query($conn,$sql);
?>

<?php while ($product = mysqli_fetch_assoc($featured)): ?>
<div class="products">
<a  class="myBtn"><img src="<?= $product['image'];?>" height="300" 
width="275"></a>
<a href="#" class="myBtn"> <p><?=$product['title'];?></p></a><br>
<p>Usual Price: £<s><?= $product['list_price'];?></s></p>
<p>Sale Price: £<?= $product['price'];?></p>

</div>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal..</p>
</div>

</div>
<?php endwhile ?>

css:

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }

 /* Modal Content/Box */
 .modal-content {
   background-color: #fefefe;
   margin: 15% auto; /* 15% from the top and centered */
   padding: 20px;
   border: 1px solid #888;
   width: 80%; /* Could be more or less, depending on screen size */
 }
 /* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
   }

 .close:hover,
 .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
    }

javascript:

// 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 on 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) {

issues: 1.The modal background doesn't display at all

2.The modal-content displays by block by default when the page is opened

3.There is no style on the button

4.The modals don't open when clicked on (except the first one)

The modal is just copy pasted from W3schools so I expect the code is right. What am i doing wrong here?

thanks.

Answer 1

Few suggestions:

• You should use bootstrap model. so no need for manual javascript.
• Secondly for multiple model in loop. your ID and reference should be different for each loop iteration. Like in 1st iteration id and ref could be name-1 then name-2 and so on

It will be working fine in that way.