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

Question

我正在使用 elevateZoom jquery 插件，我动态地将图像添加到 div 并尝试在其上使用缩放。但是因为我对 div 使用 z 索引(我必须使用 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>

Answer 1

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
     });