如何使用 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 添加信息以传递图像源以显示在模态中?
谢谢!!!
最佳答案
如果你使用的是 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">×</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
});
这是工作 fiddle . 希望这会有所帮助:)
关于javascript - 在 Bootstrap 中以模式打开放大图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25023199/