jquery - ElevateZoom 不适用于 Bootstrap 模式

Question

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

有人知道如何让缩放在 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"
        });
    })
});