-1

我有一个网站，我在弹出窗口中使用模态窗口。

http://dev.ikov.org/

如果您单击侧面的预告片图像，则会弹出模式。但是，如果我希望它关闭，我必须单击模式中的链接。

当我单击黑色叠加层时，我怎样才能使模态消失？请帮忙。

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    z-index: 9999!important;
    opacity:0;
    float: left;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 672px;
    position: fixed;
    margin: 10% auto;
    background: #fff;
    z-index: 2500!important;
}

这是html：

<div id="vid">
  <a href="#openModal" onClick="changeIndex()">
  <div id="vidoverlay"></div>
  <img src="imgs/vidthumb.png" /></a>
</div>
<div id="openModal" class="modalDialog">
    <div id="contentbox2">
         <div id="lightbg2">
         <a href="#close" title="Close" class="close" onclick="returnIndex()">Click here to close!</a>
             <div id="contentheader2">Ikov RSPS Trailer</div>
         <div id="textarea2">
         <div id="video"><iframe width="640" height="360" src="//www.youtube.com/embed/LeLqQ9WWDxk?wmode=transparent" frameborder="0"  wmode="Opaque" allowfullscreen></iframe></div>
          </div>
      </div>
  </div>
</div>

这是我的Javascript（与模态的功能无关，只是改变其他一些div的样式）：

    <script type="text/javascript">
function changeIndex() {
    document.getElementById('header').style.zIndex='-3'
    document.getElementById('footer').style.zIndex='-3'
    document.getElementById('video').style.zIndex='100'
}
function returnIndex() {
    document.getElementById('header').style.zIndex='5'
    document.getElementById('footer').style.zIndex='5'
    document.getElementById('video').style.zIndex='-100'
}
</script>
4

2 回答 2

0

Have you tried attaching the same onclick JS handler function to the overlay div element you currently have attached to the a#close anchor?

于 2014-02-28T02:07:31.523 回答
0

我认为您可以添加onclick="location.href='#close'"到任何元素并单击它将关闭灯箱。

但是，由于 javascript 事件冒泡，该元素不应包含您可能想要单击的其他元素（因为它也会关闭灯箱）。

所以你可以在modalDialog之前添加一个元素，添加onclick属性，然后给它这个css：position: absolute; top:0; right:0; bottom:0; left:0;

于 2014-02-28T02:22:16.053 回答