Question

我最近为自己的网站创建了自己的自定义灯箱。它似乎工作正常，除了Chrome中一个非常奇怪的问题。它会导致叠加的内容在关闭后变得更暗淡。将它与firefox或IE进行比较，你会看到不同之处。关于导致这种行为的任何想法？我禁用了foggy.js它似乎没有阻止它，它似乎是CSS的东西，但我无法弄清楚是什么导致它。我的javascript隐藏了整个变暗的图层和弹出窗口。我有第二个非实时版本，其中弹出窗口每个会话仅运行一次，当我刷新页面时，缩略图更亮。手动打开和关闭弹出窗口后，它们会再次变暗。

http://chrisnuzzaco.com/testdesigns/promo-gallery-2.html

下面是灯箱CSS：

#promoboxoverlay{
position:fixed;
z-index:100;
top:60px;
bottom:45px;
left:0px;
right:0px;
background-color:black;
opacity:0.65;
filter:alpha(opacity=60); /* For IE8 and earlier */
}


#wrapperwrapper{
left:0px;
right:0px;
top:60px;
bottom:45px;
position:fixed;
overflow:hidden;
z-index:325;

}

#promoboxwrapper {
  width: 100%;
  height: 100%;
  z-index:350;
  position: relative;

top:0px;
bottom:0px;
  text-align: center;
}
#promoboxwrapper:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;

}


#promoboxcontent {
  display: inline-block;
  vertical-align: middle;
  position:relative;
  width:60%;
  height:auto;
  margin: 0 auto;
  /* IE7 */
   *display: block;
   *margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");


-moz-border-radius:5px;
-webkit-border-radius:5px;
 border-radius:5px;
 margin:5px;
-webkit-box-shadow:0 0 6em rgba(255, 255, 255, 0.7);    
-moz-box-shadow:0 0 6em rgba(255, 255, 255, 0.7);
box-shadow:0 0 6em rgba(255, 255, 255, 0.7);
border:0px solid rgba(255, 255, 255, 0.7); 

}

#videotext{position:relative;  width:100%; z-index:200; }

#videotext img{width:100%; height:auto; display: block; z-index:200;}

#videotextinner{position:absolute; top:0px; left:0px; width:45%; height:100%; color:#565656; padding-left:20px; font-family:lato; }

#close{position:absolute; top:-40px; right:-40px; z-index:500;}

#close img{width:40px; height:auto;}

#play{}

#play img{width:40%; height:auto; margin:0 auto; padding-top:10%;}

#videocontainer{position:relative; top:0px; left:0px; z-index:199; width:100%; max-height:100%; }

#videocontainer iframe {display: block;}

#openwrapper{position:fixed; bottom:45px; width:100%; z-index:200; text-align: center;}

#open{position:relative; bottom:0px; text-align: center; display:inline-block; height:30px; width:auto; background-color:#890000; padding-left:10px; padding-right:10px; padding-top:5px; font-family:lato; font-size:1.25em; border-top-left-radius: 5px 5px; border-top-right-radius:5px 5px; -moz border-top-left-radius: 5px 5px; -moz border-top-right-radius:5px 5px; color:#dadada; box-shadow: 0px 0px 45px #000000; }

以下是灯箱HTML：

<div id="wrapperwrapper">

<div id="promoboxoverlay"></div><!-- end promoboxoverlay div -->

<div id="promoboxwrapper">
<div id="promoboxcontent" >

  <div id="close" ><img src="close.png"/></div><!-- end close div -->


    <div id="videocontainer" class="video">

        <div id="videotext" ><a class="introVid" href="#video"><img src="headshot.jpg"></img>
            <div id="videotextinner"> <div>Hey John,</div> <div>I made a gallery and video</div> <div>just for you</div><div id="play"><img src="play.png"/></div> </div><!-- end videotextinner div --></a>
            </div><!-- end videotext div -->

    </div><!-- end videocontainer -->

</div><!-- end promoboxcontent div -->
</div><!-- end promoboxowrapper div -->
</div><!-- end wrapperwrapper div -->

关闭后，Lightbox窗口仅在Chrome中变暗内容

0 个答案: