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

Question

我正在从 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; ?>" height="100%" width="100%" >
        </div>
        <div class="modal-footer">
        </div>
      </div>

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

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

Answer 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="andrej@foo.bar">Cras justo odio</li>
  <li class="list-group-item" data-toggle="modal" data-target="#myModal" data-whatever="boris@foo.bar">Dapibus ac facilisis in</li>
  <li class="list-group-item" data-toggle="modal" data-target="#myModal" data-whatever="cherise@foo.bar">Morbi leo risus</li>
  <li class="list-group-item" data-toggle="modal" data-target="#myModal" data-whatever="daoud@foo.bar">Porta ac consectetur ac</li>
  <li class="list-group-item" data-toggle="modal" data-target="#myModal" data-whatever="esteban@foo.bar">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 事件——此时，我想返回触发元素，获取它的内容，并填充我的单个模态。这是动态位。

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