在模态中打开动态图像（弹出）

Posted 2023-02-24

【中文标题】在模态中打开动态图像（弹出）

【英文标题】：Open a dynamic image in modal (pop up)

【发布时间】：2018-06-05 08:20:00

【问题描述】：

我正在从 mysql 列表中检索图像源的路径。我想在 Bootstrap 模式中打开这个图像（预览），但它没有得到正确的图像。

这是我的 php 代码：

$sql="SELECT * FROM  `dirf1` WHERE  `root` =  '$root' AND  `pId` =  '$pid' ORDER BY fileType";
    $result_set=mysqli_query($GLOBALS["___mysqli_ston"], $sql);
    while($row=mysqli_fetch_array($result_set))
    
              <td><a href="f/'.$row['fileName'].'"><?php echo $link; ?><i style="font-size:22px; color:#FF9900;"></i> &emsp; <?php echo $row['fileName'] ?></a></td>

这是我的引导模式代码：

<!-- Modal image preview  -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title" align="center">Image</h4>
        </div>
        <div class="modal-body">
        <img src="f/<?php echo $showName; ?>"   >
        </div>
        <div class="modal-footer">
        </div>
      </div>

    </div>
  </div> <!-- modal image preview  end -->

如何在 Bootstrap modal 中打开动态图像？

【问题讨论】：

你能帮忙吗？ ***.com/users/1213708/nigel-ren

如果它没有得到正确的图像名称，那么任何前端帮助都将无济于事。在这种情况下，您的 SQL 或 PHP 有问题。

它在表中回显正确的名称，但在模态中仅显示第一个结果。查询工作正常。你能检查一下这段代码吗？ @雪猴

所以当用户从给定的 td 元素中选择它时，您正在寻找一个显示图像的模式？在那种情况下，您弹出模式的 javascript 是什么？

我正在使用默认的引导模式，它不需要任何外部 javascript 代码。 @雪猴

【参考方案1】：

正如我在笔记中反复说过的，您不需要任何其他 javascript 来弹出模态框。你是绝对正确的。但是，如果您希望将 DYNAMIC 内容插入到模态中，那么我是对的，您确实需要某种外部控制。如果您点击引导文档的链接，您会看到类似于以下内容的内容：

/****
 * When the modal is displayed, I want to get my dynamic content.
 *  In this case, the dynamic content is a data-whatever attribute
 *  and the actual text content of the clicked LI element.
 *
 *  I will take that content, and use it to populate my modal
 *  dynamically. In this way, I have a single modal popup with content
 *  from any number of sources. The only requirements are that the
 *  triggering element have a data-whatever attribute and some
 *  sort of text content.
 *  All of this is happening when my modal is triggering its show
 *  event, so it will all happen just before the modal is displayed.
 ****/
 
$('#myModal').on('show.bs.modal', function (event) 
  // Element that triggered the modal
  var liEl = $(event.relatedTarget); 
  
   // Extract info from data-* attributes, and from the element itself.
  var recipient = liEl.data('whatever');
  var textContent = liEl.text();
  
  // If necessary, you could initiate an AJAX request here
  //   (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could
  //   use a data binding library or other methods instead.
  var modal = $(this);
  
  // Update the dynamic portions of the modal dialog.
  modal.find('.modal-title').text('New message to ' + recipient);
  modal.find('.modal-body textarea[name="message-body"]').text(textContent);
);

.js-my-modal-control 
  width: 300px;

.js-my-modal-control li
  cursor: pointer;

.js-my-modal-control li:hover
  background-color: #ccc;

.modal textarea 
  width: 100%;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="js-my-modal-control list-group">
  <li class="list-group-item" data-toggle="modal" data-target="#myModal" data-whatever="[e-mail]">Cras justo odio</li>
  <li class="list-group-item" data-toggle="modal" data-target="#myModal" data-whatever="[e-mail]">Dapibus ac facilisis in</li>
  <li class="list-group-item" data-toggle="modal" data-target="#myModal" data-whatever="[e-mail]">Morbi leo risus</li>
  <li class="list-group-item" data-toggle="modal" data-target="#myModal" data-whatever="[e-mail]">Porta ac consectetur ac</li>
  <li class="list-group-item" data-toggle="modal" data-target="#myModal" data-whatever="[e-mail]">Vestibulum at eros</li>
</ul>

<!-- Modal which I will be filling with dynamic content -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <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">Modal title</h4>
      </div>
      <div class="modal-body">
      <textarea name='message-body'></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

请注意，对话框本身是由 Bootstrap 处理的。我与它无关。我不理会那件作品，因为它工作正常。但是我可以并且应该挂钩到 Bootstrap API 并监听模态的show.bs.modal 事件——此时，我想返回触发元素，获取它的内容，并填充我的单个模态。这是动态位。

回答你的问题，是的。是的，我在引导程序方面有丰富的经验。有吗？

【讨论】：

我很抱歉在我的回复中有点讽刺，但真的很高兴它有效。 ;)