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

Question

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

每当用户将图像插入到内容编辑器中时,我需要它可以单击以使用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添加信息以传递图像源以显示在模态中？

谢谢!!!

Answer 1

如果您使用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的:

$("#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
});

这是工作小提琴.希望这可以帮助 :)

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>

JavaScript的:

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

如果此窗口仅在100%的屏幕上打开,那也很好.这里的图片里面有描述超过100%并且变得可滚动...如果屏幕比图片大得多,它只会停在原始尺寸上.对于前 900 px,高度不大.

http://jsfiddle.net/2ve4hbmm/

Answer 3

这个插件对我很有用.

Bootstrap 3灯箱插件

Answer 4

我知道你的问题被标记为boostrap-modal（虽然你也没有明确提到 Bootstrap），但我喜欢看到W3.CSS解决这个问题的简单方法，我认为分享它是很好的。

  <img src="/myImage.png" style="width:30%;cursor:zoom-in"
  onclick="document.getElementById('modal01').style.display='block'">

  <div id="modal01" class="w3-modal" onclick="this.style.display='none'">
    <div class="w3-modal-content w3-animate-zoom">
      <img src="/myImage.png" style="width:100%">
    </div>
  </div>

我让您链接到 W3School模态图像示例，以查看使 W3.CSS 工作的标题。