Question

我在一个bootstrap 3模态元素中进行了Elevate Zoom工作，并且在按照这里找到的答案后一切正常：

ElevateZoom don't work in bootstrap modal

使用上面链接答案中给出的代码，我提升了模式启动时的缩放功能。除了当我关闭模态时，我仍然在我的页面上看到一个看不见的区域但是当我将鼠标悬停在它上面时，放大的（缩放）图像仍然显示在页面的一角。

我使用的代码基于此：

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

我猜测这会激活提升缩放脚本，但在关闭模式时不会终止缩放插件，所以当我返回页面时，我仍然会获得一个活动区域。

使用检查器我看到每次打开模态时，都会在HTML中添加以下代码的新实例：

<div class="zoomContainer" style="position: absolute; left: 0px; top: 51293px; height: 402px; width: 568px;></div>"

Answer 1

这是来自互联网的某人回答/代码片段。我在回来的时候用它，没关系。可能已经解决了 - 但对于其他可能找到这个主题的人来说：

试试这个：

  jQuery('#myModal').on('hidden.bs.modal', function (e) {

    jQuery.removeData(jQuery('#zoom_05'), 'elevateZoom');//remove zoom instance from image
    jQuery('.zoomContainer').remove();// remove zoom container from DOM
  });

Bootstrap 3.0模态和提升缩放故障

1 个答案: