面对迫在眉睫的截止日期，发现自己完全陷入了以下困境 - 我现在已经花了四天时间，没有太大进展，所以任何帮助或建议都非常赞赏！
我正在使用ElevateZoom的多个实例（带有图库和灯箱，取自他们的示例页面，每个都在其自己的模态弹出窗口中，位于same page - WARNING it's a lingerie shop - someone on here complained last time.)
我的问题是缩放窗口在打开模式之前出现，如果我只是将缩放功能设置为'false'，它似乎也会使产品图像的可点击区域变窄！缩放意味着在每个模态内的主要产品图像上。
我已经搞砸了各种z索引，做了很多谷歌搜索，参考官方配置，这里的各种帖子，以及一些相关但没有相关的特定于高程缩放的z-index教程改变任何东西（不能发布更多的链接，因为我的声誉还不够高），而且我仍然完全陷入困境......
HELP！
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，window，document）;
答案 0 :(得分：0)
应用提到的修补程序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",
with：
"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",