ElevateZoom在引导模式下不起作用 [英] ElevateZoom don't work in bootstrap modal
问题描述
我使用 ElevateZoom jQuery插件进行照片缩放( http ://www.elevateweb.co.uk/image-zoom/examples ).效果很好,但是当我以自举模式显示图像时,缩放不再起作用.
I use the ElevateZoom jQuery plugin for photo zooming (http://www.elevateweb.co.uk/image-zoom/examples). It works fine, but when I show an image in a bootstrap modal the zooming doesn't work anymore.
有人知道我如何让引导模式下的缩放工作吗?
Does anybody know how I can let the zooming work in a bootstrap modal?
代码示例: http://ec-auditfile.nl/demo.html
推荐答案
您的缩放有效,它只是隐藏在模态后面.
Your zoom is working, it's just hidden behind your modal.
调整缩放图像的z-index使其位于模态上方.
Adjust z-index of your zoomed image to be over the modal.
.zoomContainer{ z-index: 9999;}
.zoomWindow{ z-index: 9999;}
您可能还需要添加.elevateZoom()函数作为模式展示事件的回调
You may also need to add .elevateZoom() function as a callback to modal show event
示例(使用Bootstrap 3)
Example (using Bootstrap 3)
$(document).ready(function () {
$('#myModal').on('shown.bs.modal', function() {
$("#zoom_05").elevateZoom({
zoomType: "inner",
cursor: "crosshair"
});
})
});
这篇关于ElevateZoom在引导模式下不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!