我正在模拟一个淡出背景的弹出窗口。我这样做只需切换一个填满整个屏幕的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(),但我根本无法让它工作。
答案 0 :(得分: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上触发回调(甚至认为只有当选择器匹配时才会调用回调)。
您还需要摆脱onclick
html属性,因为如果未定义该函数,它们将抛出错误。
答案 1 :(得分:0)
我希望我能理解你的问题。
如果是这种情况,你应该这样:
<div id="overbox">
而不是:
<div id="overbox" onclick="popbox()">
here是更新的jsfiddle