切换只需要在父div上工作,而不是在子div上工作

时间:2013-09-16 22:56:53

标签: javascript jquery html css

我正在模拟一个淡出背景的弹出窗口。我这样做只需切换一个填满整个屏幕的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(),但我根本无法让它工作。

2 个答案:

答案 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