使用elevateZoom在我的div上有z-index问题，必须是2或3

Posted 2021-04-24

我正在使用elevateZoom jquery插件，我动态地将图像添加到div并尝试使用它上的缩放。但是因为我使用z-index作为我的div（我必须使用z索引）变焦镜头落后于div。

javascript的：

$("#test").html('<img id="toZoom"   data-zoom-image="./icon1.jpg" width="449px" height="600px" margin="10px" src="./icon1.jpg" alt=""/>');

$("#toZoom").elevateZoom({
    zoomType: "lens",
    lensShape: "rechtangle",
    lensSize: 100
});

HTML：

<div id="container" style="width:100%;height:100%;position: relative;">
    <div id="test" style="display:none;position:absolute;z-index:2;">
        <div></div>

答案

https://github.com/Regaddi/elevatezoom/commit/93028ada9814c35cd3ac0bfb037e5904c0d7a4c6

只需在elevateZoom.js文件中替换此行即可

 self.zoomWindowContainer =$('<div/>').addClass('zoomWindowContainer').css("width",self.options.zoomWindowWidth);

有了这个 ：

    self.zoomWindowContainer = $('<div/>').addClass('zoomWindowContainer').css({
       "width": self.options.zoomWindowWidth,
       "z-index": 999
     });