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

【问题标题】：How can I make the modal overlay disappear when the overlay is clicked?单击叠加层时，如何使模态叠加层消失？
【发布时间】：2014-02-28 01:54:31
【问题描述】：

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

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>

【问题讨论】：

请也发布您的javascript代码。

标签： html css modal-window

【解决方案1】：

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

【讨论】：

我连接的onclick函数与模态窗口没有任何关系
所以 returnIndex() 函数不会“关闭”模态窗口？如果您使用所使用的任何 JS 代码更新您的问题，这将有所帮助。我的想法是，当您单击“单击此处关闭”时，当前正在关闭模式窗口的任何代码如果作为 onclick 事件侦听器附加到覆盖文档元素，也应该可以工作。

【解决方案2】：

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

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

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

【讨论】：