在 Bootstrap 中以模态打开放大图像

Question

如何使用 jquery/js 而 不是数据属性 在模式中 open / enlarge 图像？

每当用户将图像插入内容编辑器时，我都需要它可以单击以使用 js 在模态中展开，因此我不能依赖用户输入他们不知道如何使用的数据属性。

我试过了：-

<a href="/myImage.png" id="pop">
    <img src="/myImage.png" style="width: 400px; height: 264px;">
    Click to Enlarge
</a>

jQuery :-

$("#pop").on("click", function() {
   $(this).modal();
});

我是否需要向 jquery 添加信息以传递图像源以显示在模态中？

谢谢！！！

原文由 Jibes 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您使用的是引导程序 3，则可以尝试此代码：

HTML

 <a href="#" id="pop">
 <img id="imageresource" src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;">
 Click to Enlarge
 </a>

 <!-- Creates the bootstrap modal where the image will appear -->
 <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title" id="myModalLabel">Image preview</h4>
 </div>
 <div class="modal-body">
 <img src="" id="imagepreview" style="width: 400px; height: 264px;" >
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 </div>
 </div>
 </div>
 </div>

JavaScript：

 $("#pop").on("click", function() {
 $('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
 $('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
 });

这是工作 小提琴。

希望这可以帮助 ：）

原文由 martinezjc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我已经改变了一点点，但仍然不能做一些事情。

我补充说点击它关闭它 - 这很简单但非常实用。

  <div class="modal-dialog" data-dismiss="modal">

我还需要在每张照片下进行不同的描述。我在页脚中添加了描述只是为了展示我需要的东西。它需要随着每张照片而改变。

HTML

 <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" data-dismiss="modal">
      <div class="modal-content"  >
        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
             <img src="" class="imagepreview" style="width: 100%;" >
        </div>
     <div class="modal-footer">
       <div class="col-xs-12">
           <p class="text-left">1. line of description<br>2. line of description <br>3. line of description</p>
       </div>
     </div>
   </div>
 </div>

脚本：

 $(function() {
    $('.pop').on('click', function() {
        $('.imagepreview').attr('src', $(this).find('img').attr('src'));
        $('#imagemodal').modal('show');
    });
});

如果此窗口仅在 100% 的屏幕上打开，那也很好。这里带有描述的图片超过 100%，并且可以滚动……如果屏幕比图片大得多，它应该只停在原始尺寸上。例如。 900 像素，高度不大于。

http://jsfiddle.net/2ve4hbmm/

原文由 Tassak 发布，翻译遵循 CC BY-SA 4.0 许可协议