在 Bootstrap 中打开模态放大图像 [英] In Bootstrap open Enlarge image in modal

查看：37
本文介绍了在 Bootstrap 中打开模态放大图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何使用 jquery/js 而非数据属性在模态中打开/放大图像?

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

我试过:-

<img src="/myImage.png" style="width: 400px; height: 264px;">点击放大</a>

jQuery :-

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

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

谢谢！！！

解决方案

如果你正在使用 bootstrap 3，你可以试试这个代码:

HTML

<img id="imageresource" src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;">点击放大</a><!-- 创建图像将出现的引导模式 --><div class="modalfade" 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">关闭</span></button><h4 class="modal-title" id="myModalLabel">图片预览</h4>

<div class="modal-body"><img src="" id="imagepreview" style="width: 400px; height: 264px;">

<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

JavaScript:

$("#pop").on("click", function() {$('#imagepreview').attr('src', $('#imageresource').attr('src'));//当用户点击放大链接时，这里将图像分配给模态$('#imagemodal').modal('show');//imagemodal 是分配给 bootstrap modal 的 id 属性，然后我使用 show 函数});

这是有效的fiddle.希望这会有所帮助:)

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

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.

I tried:-

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

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

Thank you!!!

解决方案

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:

$("#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 中打开模态放大图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆