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屋！