Блог

Как я могу изменить содержимое модального поля после того, как вы нажмете на определенное изображение. Я занимаюсь проектом и не хочу использовать слишком много кода, поэтому мне бы хотелось, чтобы пользователь нажимал на любое изображение и получал результаты этого конкретного изображения только в содержимом модального поля, но я попытался добавить PHP, КАК ПОКАЗАНО НИЖЕ, и сделать много модальных полей, ЧТО БЫЛО НАПРЯЖЕННО И ЭФФЕКТИВНО, Пожалуйста, дайте мне подробную инструкцию и вежливо скажите, не ошибаюсь ли я.

 <div id="projects">
    <h2 >Projects</h2>
    <h5>Here Some mind blowing project made by pupils of our school Caleb British International school.
      <br>
    Click on the image to access<br>
  </h5>
    <h4>A Basic Calculator by Adachukwu Ezechukwu</h4>
    
    <img id="ae-calc" src="images/ae-calc.png" alt="A Basic Calculator by Adachukwu Ezechukwu" onclick="<?php $img = 1 ?>" >
    <br>
    <br>
    <h4>A Simple Calendar by Adachukwu Ezechukwu</h4>
    
    <img id="ae-mdc" src="images/ae-mdc.png" alt="A Simple Calendar by Adachukwu Ezechukwu" onclick="<?php $img = 2 ?>">
    
   </div> 
    <!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
<div class="modal-content">
  <div class="modal-header">
    <span class="close">amp;times;</span>
    <h2>A Basic Calculator</h2>
  </div>
  <div class="modal-body">
    <?php if ($img = 2) {

   ?>
    <iframe src="mdc/index.php" width="100%" height="350px"></iframe>
  <?php  } 
  elseif ($img = 1) {?>
    <iframe src="calculatorapp/index.php" width="100%" height="350px"></iframe>
 <?php } ?>
    
  
  </div>
  
</div>
</div>
  </div>
</div>

<script>
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img1 = document.getElementById("ae-calc");
var img2 = document.getElementById("ae-mdc");
var modalImg = document.getElementById("img01");

img1.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  
}
img2.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
</script>