Question

我有一个表单可以让用户将事件图像上传到特定患者，图像的路径将存储到数据库中。

现在我的问题是，当我在患者表格中显示患者的图像时，我想为患者的每张图像显示一个模态。

这是我的表：

这是我的代码：

<?php 

$con_mysql = mysql_connect('localhost','root','admin');
mysql_selectdb('dbphotos'); 

$sql = "SELECT * FROM  `tblphotos` WHERE `pnt` LIKE '1' ";
$result= mysql_query($sql);
while($data = mysql_fetch_assoc($result))
  {
      $id = $data['id'];
      $pnt = $data['pnt'];
      $path = $data['path'];

      ?>
      <div >
      <img id="myImg" src="uploads/<?php echo $path; ?>" title="<?php echo $path; ?>" alt="<?php echo $path; ?>" width="300" height="200">  
      </div>

      <div id="myModal" class="modal">
        <span class="close">X</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
      </div>

        <script>
        // Get the modal
        var modal = document.getElementById('myModal');
        // Get the image and insert it inside the modal - use its "alt" text as a caption
        var img = document.getElementById('myImg');
        var modalImg = document.getElementById("img01");
        var captionText = document.getElementById("caption");
        img.onclick = function(){
          modal.style.display = "block";
          modalImg.src = this.src;
          modalImg.alt = this.alt;
          captionText.innerHTML = this.alt;
        }

        // 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>

      <?php
  }
 ?>

只有第一张图像有一个模态，其他图像没有打开一个模态

现在我知道问题出在div和script的ID处，因为它只会循环使用相同的ID。

所以我认为解决方案是使用echo $id来识别ID和类：

      <div>
      <img id="<?php echo $id; ?>" src="<?php echo $path; ?>" title="<?php echo $path; ?>" alt="<?php echo $path; ?>" width="300" height="200">  
      </div>

      <div id="<?php echo $id; ?>" class="modal">
        <span class="<?php echo $id; ?>-close">X</span>
        <img class="<?php echo $id; ?>-content" id="<?php echo $id; ?>-img01">
        <div id="caption"></div>
      </div>

但我不知道如何在javascript中显示PHP的循环ID。

提前感谢你......

Answer 1

你正在过度循环。您不需要为每个图像或新的<script>块创建新的模态容器。

您可以使用单个模态容器，只需将其中的图像设置为单击图像的src即可。对于脚本，您只需使用处理程序的相同函数为每个图像设置单击事件处理程序。

对于图像生成，只需循环创建图像的html。为它们提供所有相同的类名，以便您可以使用单个选择器来获取对它们的引用。

while($data = mysql_fetch_assoc($result)) {
    $id = $data['id'];
    $pnt = $data['pnt'];
    $path = $data['path'];
    ?>
    <div>
    <img class="someClass">  
    </div>
    <?
}

制作单个模态容器

<div id="myModal" class="modal">
  <span class="close">X</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

然后在您的javascript中，您需要获得对每个可点击图片的引用并设置点击监听器

//Define a function to use as event handler
function showImageModal(){
    modal.style.display = "block";
    modalImg.src = this.srsc;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}

//Modal elements
var modal = document.getElementById('myModal');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var modalCloseBtn = modal.querySelectorAll(".close");

//Get images by using the class we gave each image
var images = document.querySelector(".someClass");
//Loop through the images and set the click event handler
for(let i=0; i<images.length; i++){
    images[i].addEventListener("click",showImageModal);
}
modalCloseBtn.addEventListener("click",function(){
    modal.style.display = "none";
});

演示

＆＃13;

function showImageModal() {
  modal.style.display = "block";
  modalImg.src = this.src;
  modalImg.alt = this.alt;
  captionText.innerHTML = this.alt;
}

var modal = document.getElementById('myModal');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var modalCloseBtn = modal.querySelector(".close");

var images = document.querySelectorAll(".someClass");
for (let i = 0; i < images.length; i++) {
  images[i].addEventListener("click", showImageModal);
}
modalCloseBtn.addEventListener("click", function() {
  modal.style.display = "none";
});

＆＃13;

.image-list {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  margin: auto;
}
.image-list img {
  flex: 1 1 64px;
  margin: 4px;
  cursor: pointer;
}
.modal {
  position: fixed;
  width: 75vw;
  height: 75vh;
  left: 12vw;
  top: 12vh;
  background: white;
  border: 1px solid;
  display: none;
}

.close {
  position: absolute;
  top: 0px;
  right: 0px;
  background: red;
  color: white;
  font-size: 18px;
  font-weight: bold;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
}

＆＃13;

<div class="image-list">
  <img class="someClass" src="http://placekitten.com/g/64/64" alt="caption1">
  <img class="someClass" src="http://placekitten.com/g/64/63" alt="caption2">
  <img class="someClass" src="http://placekitten.com/g/64/62" alt="caption3">
  <img class="someClass" src="http://placekitten.com/g/64/61" alt="caption4">
  <img class="someClass" src="http://placekitten.com/g/64/60" alt="caption5">
</div>
<div id="myModal" class="modal">
  <span class="close">X</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

＆＃13;

Answer 2

最简单的方法是使用一些灯箱插件this one

下载文件并在html页面上调用脚本，然后使用它：

<a href="<?php echo $path ?>"><img src="<?php echo $path ?>"></a>

Answer 3

您似乎正在根据图像的id属性打开模态。每张图片的id都必须是唯一的，而您应该为<img>标记指定一个类。在下面的片段中，我删除了id属性，并将其替换为class="an-image"。

<div>
  <img class="an-image" src="uploads/<?php echo $path; ?>" title="<?php echo $path; ?>" alt="<?php echo $path; ?>" width="300" height="200">  
</div>

现在document.getElementsByClassName()可用于标识应捕获onclick事件的元素。

<script>
  // Get the modal
  var modal = document.getElementById('myModal');
  // Get the image and insert it inside the modal - use its "alt" text as a caption

  // You want the onclick event to work for all elements
  // with the 'an-image' class attribute.
  var img = document.getElementsByClassName("an-image");

  var modalImg = document.getElementById("img01");
  var captionText = document.getElementById("caption");
  img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
  }

  // 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>

PHP：如何为每个图像创建模态

3 个答案: