从MySQL获取图像到Bootstrap模式

问题描述：

我有2个图像在1帖子中，我想显示所有帖子的图像，当我点击Bootstrap模态。从MySQL获取图像到Bootstrap模式

<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

<!-- Modal --> 
<div id="myModal" class="modal fade" 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">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
     ALL IMAGES WILL SHOW HERE 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div>

一种解决方案可能是获取图像位置的数组，然后将此数组传递给模板。现在，当触发对话时，只需使用'.html（）'使用jquery从数组中加载图像 –

答

Using jquery

=============

给你的模态发射按钮，一个id比如：id = “秀”

添加下面的jQuery码到您的图像添加到您的模式

$("#show").on("click", function() {$(".modal-body").html("<img src='https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg' width='80px'><img src='https://static.pexels.com/photos/51397/legs-window-car-dirt-road-51397.jpeg' width='80px'><img src='https://static.pexels.com/photos/21014/pexels-photo.jpg' width='80px'>" ); })

View Demo

从MySQL获取图像到Bootstrap模式

相关推荐