在页面上创建一个动态覆盖仍然惰性鼠标活动

我有一个窗体，单击“登录”并向上滑动“关闭”。我希望在页面下方和页面上方有一个半透明的叠加层，使页面的其余部分对于鼠标活动变得暗淡和惰性。下面是标记：在页面上创建一个动态覆盖仍然惰性鼠标活动

<body> 
<div id="container" style="position:absolute;with:100%;height:100%"> 
<div id="overlay"></div> 
<form action="#" method="post">Some Form</form> 
</div>

用于叠加的CSS：

#overlay{ 
width:100%; 
height:100%; 
background-color:#002aff; 
opacity:.7; 
position:relative; 
z-index:1; 
display:none; 
}

我用调用覆盖和形式：

$(document).ready(function() { 

// Expand Panel 
$("#open").click(function(){ 
    $("div#overlay").slideDown("fast"); 
    $("div#panel").slideDown("400"); 

}); 

// Collapse Panel 
$("#close").click(function(){ 
    $("div#overlay").slideUp("fast"); 
    $("div#panel").slideUp("300"); 
});  

// Switch buttons from "Log In | Register" to "Close Panel" on click 
$("#toggle a").click(function() { 
    $("#toggle a").toggle(); 
});  

});

问题是这样的已经离开休息我的页面在整个页面内呈惰性（链接方面没有鼠标活动），即使叠加器未处于活动状态。作为对此的解决方案，我尝试将.addClass（）和.remove（）设置为“#overlay”，以定义类中的属性。但是，这仍然使我的页面无法加载或者在课程被删除后无法点击......任何建议！

来源

2012-07-31 Anubhab

尝试更改点击时的z-index规则，因此当叠加层没有发生时为-1。

来源

2012-07-31 17:07:58 dezman

谢谢..问题出在Z指数上，#container本身就是一个不可见的层。现在我动态添加和删除容器本身的样式。但它的第一次工作正常......但一旦它删除了第二次不添加！ – Anubhab 2012-07-31 17:18:41

你确定你正在删除z-index，你能设置一个jsfiddle吗，所以我可以看看发生了什么。 – dezman 2012-07-31 17:39:02

已经解决了这个问题，问题的关键是仔细看看z-index。我在#container下向div中添加和删除类，但是一旦与z-index一起弄乱，我意识到空白叠加层是由容器本身引起的。所以现在我调整了javascript到$（“＃容器”）.addClass（“.foo”），这做到了。无论如何感谢触发火花......否则不会意识到我的愚蠢。再次感谢！！ – Anubhab 2012-07-31 19:45:21

在页面上创建一个动态覆盖仍然惰性鼠标活动

回答

相关问题