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

问题描述

如何使用jquery / js和非数据属性打开/放大模式中的图像？

How do I open / enlarge an image in a modal using jquery / js and not data attributes?

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

Anytime a user inserts an image into a content editor I need it to be clickable to expand in a modal with js, so I cannot rely on the user to input data attributes they don't know how to use.

我试过： -

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

jQuery： -

jQuery :-

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

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

Do I need to add info to the jquery to pass the image source to appear in the modal?

谢谢!!!

推荐答案

你可以试试这个代码你正在使用bootstrap 3：

You can try this code if you are using bootstrap 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：

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
});

这是工作。
希望这会有所帮助：）

This is the working fiddle.Hope this helps :)

这篇关于在Bootstrap中打开放大模态中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！