ElevateZoom在引导模式下不起作用

Question

我使用ElevateZoom jQuery插件进行照片缩放(http://www.elevateweb.co.uk/image-zoom/examples).它工作正常,但当我在引导模式中显示图像时,缩放不再起作用.

有谁知道我如何让变焦工作在bootstrap模式中？

代码示例:http://ec-auditfile.nl/demo.html

Answer 1

你的变焦工作正常,它隐藏在你的模态背后.

将缩放图像的z-index调整为模态.

    .zoomContainer{ z-index: 9999;}
    .zoomWindow{ z-index: 9999;}

您可能还需要添加.elevateZoom()函数作为模态显示事件的回调

示例(使用Bootstrap 3)

$(document).ready(function () {
    $('#myModal').on('shown.bs.modal', function() {
        $("#zoom_05").elevateZoom({
            zoomType: "inner",
            cursor: "crosshair"
        });
    })
});