0

我有一个表单，在单击“登录”时向下滑动，在“关闭”时向上滑动。我想在表单下方和页面上方有一个半透明的覆盖，这将使页面的其余部分变暗并且对鼠标活动无效。这是标记：

<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”。但这仍然使我的页面在加载时甚至在类被删除之后都无法点击......任何建议！

4

1 回答 1

0

尝试在单击时更改 z-index 规则，因此在未发生覆盖时它为 -1。

于 2012-07-31T17:07:58.793 回答