Question

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

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>

Answer 1

您是否尝试将相同的onclick JS处理函数附加到您当前附加到#close锚点的overlay div元素上？

Answer 2

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

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

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

单击叠加层时，如何使模态叠加消失？

2 个答案: