如何使用单一模式显示多个图像

how to use a single modal for displaying multiple images

本文关键字：图像 显示 模式 何使用 单一      更新时间：2023-09-26

按数据库表行排序。我的页面将由多行填充(目前为32行)，每行有一个图像。我在每行的末尾创建了一个按钮/链接。我需要一个弹出窗口(#modal)显示从数据库获取的图像。当按钮被点击时

我想要一个特定的图像从数据库表使用id传递(id给定时点击链接)并在弹出框中显示在图像标签下。有出路吗?我有我的代码下面我需要使用一个模式显示各种图像;按时取回??我对此感到困惑。但我知道有出路。如果我没有说清楚，我很抱歉。

// there will be many links depending on the no. of rows in database
      <a href="#checkImage" data-toggle="modal">  Image </a>

<div class="modal fade" id="checkImage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="color:black;" id="myModalLabel">Reset Password</h4>
      </div>
      <div class="modal-body" style="color:black;">
        
        <h1>Your Image</h1>
        
        <img src=#fetchedImageFromDB>
        
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       
      </div>
    </div>
  </div>
</div>

你可以在你的锚中使用另一个data属性。

<a href="#checkImage" data-toggle="modal" data-myimage="imageurl.jpg">  Image </a>

然后，在你的模态，得到"myimage"(不使用大写字符以避免兼容性问题)值，并把它放在你的模态。你的Javascript库应该能帮到你。

相关文章：