我正在列表中从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>   <?php echo $row['fileName'] ?></a></td>
}
这是我的Bootstrap模态代码:
<!-- 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">×</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模式中打开动态图像?
答案 0 :(得分:0)
正如我在笔记中反复说的那样,你不需要任何其他的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);
});
&#13;
.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%;
}
&#13;
<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">×</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 -->
&#13;
请注意,Bootstrap正在处理对话框本身。我没跟它做什么。我把它放在一块,因为它工作正常。但是我可以并且应该挂钩Bootstrap API并听取模态的show.bs.modal
事件 - 此时,我想回顾一下触发元素,获取其内容,并填充我的单个模态。这是动态的比特。
回答你的问题,是的。是的,我有过使用bootstrap的丰富经验。你呢?