javascript - 模态弹出窗口内的 ElevateZoom 缩放窗口在弹出窗口打开之前显示在内容后面

Question

临近截止日期，发现自己完全陷入了以下困境 - 我现在已经花了四天时间，但没有太大进展，所以非常感谢任何帮助或建议!

我正在使用 ElevateZoom 的多个实例(画廊和灯箱打开，取自他们的示例页面，每个实例都在它自己的模式弹出窗口中，在 same page - WARNING it's a lingerie shop - someone on here complained last time.)

我的问题是缩放窗口在模式打开之前出现，如果我简单地将缩放功能设置为“false”，它似乎也会使产品图片的可点击区域变窄!缩放意味着在每个模态内的主要产品图像上。

我弄乱了各种 z-index，做了很多谷歌搜索，引用了官方配置，这里的各种帖子，以及一些相关但不相关的 elevate-zoom-specific z-index 教程更改任何内容(无法发布更多链接，因为我的声誉还不够高)，我仍然完全陷入困境......

帮助!

HTML -

<div class="content-table">
  <table width="528" border="0" cellspacing="0" cellpadding="10">
    <tr>
      <td colspan="5" align="left" valign="middle"><img src="assets/img/logo.png" alt="Welcome to Guerilla Geisha" width="504" height="139"></td>
    </tr>
    <tr>
      <td colspan="5" align="left" valign="middle"><strong style="color: #F00">PANTIES</strong> - Please click a design for more details</td>
    </tr>
    <tr>
      <td><!-- COPY FROM HERE TO MAKE A NEW PRODUCT POPUP --> 
        <a href="#openModal"> <img src="assets/img/shop-images/cherry-blossom-knickers-1.jpg" alt="Cherry Blossom panties - Front view" width="176" height="189" border="3" > </a>
        <div id="openModal" class="modalDialog">
        <div>
        <a href="#close" title="Close" class="close">X</a>
        <div id="column1-wrap">
          <div id="column1">
            <div class="zoom-left">
              <div style="height:350px;width:350px;" > <img style="border: 3px solid #fff; position: absolute;" id="zoom_03" src="elevatezoom-master/images/small/cherry-blossom-knickers-1.jpg" data-zoom-image="elevatezoom-master/images/large/cherry-blossom-knickers-1.jpg" width="350"> </div>
              <br>
              <div id="gallery_01" style="width=" 350pxfloat:left;="" "=""> <a href="#" class="elevatezoom-gallery active" data-update="" data-image="elevatezoom-master/images/small/cherry-blossom-knickers-1.jpg" data-zoom-image="elevatezoom-master/images/large/cherry-blossom-knickers-1.jpg"> <img src="elevatezoom-master/images/thumb/cherry-blossom-knickers-1.jpg" ></a> <a href="#" class="elevatezoom-gallery" data-image="elevatezoom-master/images/small/cherry-blossom-knickers-2.jpg" data-zoom-image="elevatezoom-master/images/large/cherry-blossom-knickers-2.jpg"><img src="elevatezoom-master/images/thumb/cherry-blossom-knickers-2.jpg" ></a> <a href="#" class="elevatezoom-gallery" data-image="elevatezoom-master/images/small/cherry-blossom-knickers-3.jpg" data-zoom-image="elevatezoom-master/images/large/cherry-blossom-knickers-3.jpg"> <img src="elevatezoom-master/images/thumb/cherry-blossom-knickers-3.jpg" > </a> <a href="#" class="elevatezoom-gallery" data-image="elevatezoom-master/images/small/cherry-blossom-knickers-4.jpg" data-zoom-image="elevatezoom-master/images/large/cherry-blossom-knickers-4.jpg"><img src="elevatezoom-master/images/thumb/cherry-blossom-knickers-4.jpg" ></a> </div>
            </div>
            <div style="clear:both;"></div>
            <script type="text/javascript">
$(document).ready(function () {
$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: "active", imageCrossfade: true, loadingIcon: "http://www.elevateweb.co.uk/spinner.gif"}); 

$("#zoom_03").bind("click", function(e) {  
  var ez =   $('#zoom_03').data('elevateZoom');
  ez.closeAll(); //NEW: This function force hides the lens, tint and window 
    $.fancybox(ez.getGalleryList());
  return false;
}); 

}); 

</script> 
          </div>
        </div>
        <div id="column2">
          <div style='z-index: 1'>
            <h1>CHERRY BLOSSOM PANTIES</h1>
          </div>
          <div style='z-index: 2'>
            <p>A classic style brief gathered at the front and back for extra figure enhancing, finished to high standards, with 3 covered buttons at the front and frilly mesh elastic.</p>
            <p> The fabric is a truly soft, silky, sheer figure hugging stretch satin, printed with my design of Japanese inspired cherry blossom flowers.</p>
            <p>The briefs are luxurious, sexy and sassy while being really comfortable.</p>
          </div>
          <div style='z-index: 3'>
            <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
              <input type="hidden" name="cmd" value="_cart" />
              <input type="hidden" name="business" value="test@test.com" />
              <input type="hidden" name="lc" value="GB" />
              <input type="hidden" name="item_name" value="Cherry Blossom knickers" />
              <input type="hidden" name="item_number" value="Knick-001" />
              <input type="hidden" name="amount" value="23.00" />
              <input type="hidden" name="currency_code" value="GBP" />
              <input type="hidden" name="button_subtype" value="products" />
              <input type="hidden" name="no_note" value="0" />
              <input type="hidden" name="add" value="1" />
              <input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHostedGuest" />
              <input type="hidden" name="on0" value="Choose from 5 colours:" />
              Choose from 5 colours:
              <select name="os0">
                <option value="Black">Black </option>
                <option value="Lime Green">Lime Green </option>
                <option value="Purple">Purple </option>
                <option value="Red">Red </option>
                <option value="Teal Blue">Teal Blue </option>
              </select>
              <br>
              <br>
              <input type="hidden" name="on1" value="Choose from 4 sizes:" />
              Choose from 4 sizes:
              <select name="os1">
                <option value="XS (UK 6, US/CANADA 4, EUROPE 34, AUSTRALIA 8, JAPAN 7)">XS (UK 6, US/CANADA 4, EUROPE 34, AUSTRALIA 8, JAPAN 7) </option>
                <option value="S (UK 8, EUROPE 36, USA/CANADA 6, AUSTRALIA 10, JAPAN 9)">S (UK 8, EUROPE 36, USA/CANADA 6, AUSTRALIA 10, JAPAN 9) </option>
                <option value="M (UK 10, EUROPE 38,USA/CANADA 8, AUSTRALIA 12, JAPAN 11 )">M (UK 10, EUROPE 38,USA/CANADA 8, AUSTRALIA 12, JAPAN 11) </option>
                <option value="L (UK 12, EUROPE 40, USA/CANADA 10, AUSTRALIA 14, JAPAN 13)">L (UK 12, EUROPE 40, USA/CANADA 10, AUSTRALIA 14, JAPAN 13) </option>
              </select>
              <br>
              <br>
              <input name="submit" type="image" class="btn hover" alt="ADD TO CART" border="0" />
            </form>
          </div>
        </div>

CSS(模态)-

@charset "utf-8";
/* CSS Document */

/* Product pop ups */

.modalDialog {
    position: fixed;
    font-family: 'Ubuntu', sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(100,100,100,0.8);
    z-index: 999;
    opacity:0;
    -webkit-transition: opacity 200ms ease-in;
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div {
    width: 900px;
    height: 458px;
    position: relative;
    margin: 13% auto;
    padding: 30px;
    background: #000;
    color: #fff;
    text-decoration: none;
}
.close {
    background: #fff;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background: #ae55ed;
    color: #fff;
    text-decoration:none;
}
#column1-wrap {
    float: left;
    width: 100%;
    display: table-cell;
}
#column1 {
    width: 355px;
    float: left;
}
#column2 {
    float: left;
    width: 524px;
    margin-left: -524px;
}

CSS(缩放)-

 #gallery_01 img{border:3px solid white;width: 78px;}
   #gallery_02 img{border:3px solid white;width: 78px;}
   #gallery_03 img{border:3px solid white;width: 78px;}
  #gallery_09 img{border:3px solid white;width: 78px;}
 .active img{border:3px solid #ae55ed !important;}


/* Hover */
@-webkit-keyframes hover {
 50% {
 -webkit-transform: translateY(-3px);
 transform: translateY(-3px);
}
 100% {
 -webkit-transform: translateY(-6px);
 transform: translateY(-6px);
}
}
 @keyframes hover {
 50% {
 -webkit-transform: translateY(-3px);
 transform: translateY(-3px);
}
 100% {
 -webkit-transform: translateY(-6px);
 transform: translateY(-6px);
}
.hover {
    display: inline-block;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hover:hover, .hover:focus, .hover:active {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-name: hover;
    animation-name: hover;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

JS-

完整版超过了字符数限制，在我的空间里here .

不过我认为这是相关部分？

$.fn.elevateZoom = function( options ) {
    return this.each(function() {
        var elevate = Object.create( ElevateZoom );

        elevate.init( options, this );

        $.data( this, 'elevateZoom', elevate );

    });
};

$.fn.elevateZoom.options = {
        zoomActivation: "hover", // Can also be click (PLACEHOLDER FOR NEXT VERSION)
  zoomEnabled: true, //false disables zoomwindow from showing
        preloading: 1, //by default, load all the images, if 0, then only load images after activated (PLACEHOLDER FOR NEXT VERSION)
        zoomLevel: 1, //default zoom level of image
        scrollZoom: false, //allow zoom on mousewheel, true to activate
        scrollZoomIncrement: 0.1,  //steps of the scrollzoom
        minZoomLevel: false,
        maxZoomLevel: false,
        easing: false,
        easingAmount: 12,
        lensSize: 200,
        zoomWindowWidth: 400,
        zoomWindowHeight: 400,
        zoomWindowOffetx: 0,
        zoomWindowOffety: 0,
        zoomWindowPosition: 1,
        zoomWindowBgColour: "#fff",
        lensFadeIn: false,
        lensFadeOut: false,
        debug: false,
        zoomWindowFadeIn: false,
        zoomWindowFadeOut: false,
        zoomWindowAlwaysShow: false,
        zoomTintFadeIn: false,
        zoomTintFadeOut: false,
        borderSize: 3,
        showLens: true,
        borderColour: "#888",
        lensBorderSize: 1,
        lensBorderColour: "#000",
        lensShape: "square", //can be "round"
        zoomType: "window", //window is default,  also "lens" available -
        containLensZoom: false,
        lensColour: "white", //colour of the lens background
        lensOpacity: 0.4, //opacity of the lens
        lenszoom: false,
        tint: false, //enable the tinting
        tintColour: "#333", //default tint color, can be anything, red, #ccc, rgb(0,0,0)
        tintOpacity: 0.4, //opacity of the tint
        gallery: false,
        galleryActiveClass: "zoomGalleryActive",
        imageCrossfade: false,
        constrainType: false,  //width or height
        constrainSize: false,  //in pixels the dimensions you want to constrain on
        loadingIcon: false, //http://www.example.com/spinner.gif
        cursor:"default", // user should set to what they want the cursor as, if they have set a click function
        responsive:true,
        onComplete: $.noop,
        onZoomedImageLoaded: function() {},
        onImageSwap: $.noop,
        onImageSwapComplete: $.noop
};

})(jQuery, 窗口, 文档);

Answer 1

应用提到的修复 here为我解决了这个问题。

在缩小版本中，第 11 行替换:

"px;border-bottom-left-radius: "+String(b.options.lensSize/2+b.options.borderSize)+"px;border-bottom-right-radius: "+String(b.options.lensSize/2+b.options.borderSize)+"px;");b.zoomContainer=d('<div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:'+b.nzOffset.left+"px;top:"+b.nzOffset.top+"px;height:"+b.nzHeight+"px;width:"+b.nzWidth+'px;"></div>');d("body").append(b.zoomContainer);b.options.containLensZoom&&"lens"==b.options.zoomType&&b.zoomContainer.css("overflow",

与:

"px;border-bottom-left-radius: "+String(b.options.lensSize/2+b.options.borderSize)+"px;border-bottom-right-radius: "+String(b.options.lensSize/2+b.options.borderSize)+"px;");b.zoomContainer=d('<div class="zoomContainer" style="-webkit-transform: translateZ(0);z-index: 1000;position:absolute;left:'+b.nzOffset.left+"px;top:"+b.nzOffset.top+"px;height:"+b.nzHeight+"px;width:"+b.nzWidth+'px;"></div>');d("body").append(b.zoomContainer);b.options.containLensZoom&&"lens"==b.options.zoomType&&b.zoomContainer.css("overflow",