如何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 添加信息以传递图像源以显示在模态中？
谢谢！！！
如果您使用的是引导程序 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">×</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
});
这是工作小提琴。希望这可以帮助 ：）
我已经稍微改变了它，但仍然不能做一些事情。
我补充说，点击它关闭它 - 这很容易但非常实用。
<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">×</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 像素，高度不能更大。
这个插件对我很有用。
我知道你的问题被标记为bootstrap-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>
这是 W3Schools模态图像示例的链接，可查看使 W3.CSS 工作的标头。
所以我在 jsfiddle 中整理了一个非常粗略的模式，供您参考。
$("#pop").on("click", function(e) {
// e.preventDefault() this is stopping the redirect to the image its self
e.preventDefault();
// #the-modal is the img tag that I use as the modal.
$('#the-modal').modal('toggle');
});
您缺少的部分是单击链接时要显示的隐藏模式。在示例中，我使用了第二张图像作为模态并添加了Bootstap类。