在页面上创建动态覆盖仍然会抑制鼠标活动

我有一个表单，单击"signin"时向下滑动，单击"close"时向上滑动。我想在表单下方和页面上方有一个半透明的覆盖层，这将使页面的其余部分变暗，对鼠标活动没有反应。这是标记：

<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"中，定义类中的属性。但这仍然使我的页面在加载时甚至在类被删除后都无法点击。。。有什么建议！！

尝试在单击时更改z索引规则，使其在没有覆盖时为-1。

相关内容

最新更新

热门标签：