在bootstrap模式上实现提升缩放

Question

我正在尝试使用bootstrap在模态中使用elevate zoom。

我尝试了一切，但遗憾的是没有结果。

如果有人能给我任何类似的样品，我将不胜感激

Answer 1

我遇到了同样的问题。 我设法解决了this anwser，但将 zoomType 更改为镜头模式（see docs）。

所以我的代码，在我的模态中使用提升缩放，是：

1）调整Css：

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

2）当模态准备就绪时调用te插件：

$('#myModal').on('shown.bs.modal', function() {
    $("#zoom_05").elevateZoom({
        zoomType: "lens",
        lensShape: "round",
        lensSize: 300
    });
});

正如你所看到的，我还使用了lensSize选项300，以使变焦更大;这是因为Mousewhell zoom在使用boostrap模式时有一些问题，同时镜头模式是一个已经正常工作的快速解决方案。