1

我正在模拟一个淡出背景的弹出窗口。我通过简单地切换填充整个屏幕的 div 来做到这一点。我希望能够通过单击外部背景来关闭弹出窗口，但当您单击当前正在发生的新内容区域时却不能。我的代码：

JS：

function popbox() {
    $('#overbox').toggle();
}

HTML：

<div class="popbox" onclick="popbox()"> Click Here </div>

<div id="overbox" onclick="popbox()">
     <div id="infobox1">
          <p>This is a new box</p>
          <br />
          <p>hello </p>
          <br/><br/>
          <p style="color:blue;text-align:center;cursor:pointer;" onclick="popbox()">close</p>
     </div><!-- end infobox1 --> 
</div> <!-- end overbox -->

CSS：

#overbox {
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%; 
     background: rgba(64, 64, 64, 0.5);
     z-index: 999999;
     display: none;
}

#infobox1 {
    margin: auto;
    position: absolute;
    left: 35%;
    top: 20%;
    height: 300px;
     width: 400px;
    background-color: white;
    border: 1px solid red;
}

.popbox {
     cursor: pointer;
     color: black;
     border: 1px solid gray;
     padding: 5px; 10px;
     background: ghostwhite;
     display: inline-block;
}

JSFiddle 链接：http: //jsfiddle.net/RrJsC/

同样，我希望它仅在您单击褪色背景或“关闭”（在 jsfiddle 中不起作用但在我的站点上）时切换，而不是在您单击它包含的白框内时切换。经过一些研究，我似乎正在寻找 .stopPropagation()，但我根本无法让它工作。

4

2 回答 2

2

我使用 jQuery 的事件处理程序让它工作：

$('#container').on('click', '.popbox, #overbox', function(e){   
  $('#overbox').toggle();
 });
 $('#container').on('click', '#infobox1', function(e){
    e.stopPropagation();
 });

我替换为document以'#container'获得更好的性能。您应该将所有 div 包含在内，<div id="container">...</div>以便每次单击时回调都不会在 dom 上触发（即使认为仅在选择器匹配时才调用回调）。

您还需要摆脱onclickhtml 属性，因为如果未定义该函数，它们将引发错误。

于 2013-09-16T23:05:42.180 回答
0

我希望我能很好地理解你的问题。

如果是这种情况，你应该有这个：

<div id="overbox">

而不是这个：

<div id="overbox" onclick="popbox()">

这是更新的jsfiddle

于 2013-09-17T00:20:09.753 回答