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();
});     

});

問題は、overlay-erがアクティブでない場合でも、ページ全体でページの残りの部分が不活性（リンクに関してマウスアクティビティがない）のままになっていることです。これに対する解決策として、クラスのプロパティを定義する「#overlay」に.addClass（）と.remove（）を試してみました。しかし、それでも、ロード時またはクラスが削除された後でも、私のページはクリックできません...提案があります!!

4

1 に答える 1

0

クリック時にz-indexルールを変更してみてください。オーバーレイが発生していない場合は、-1になります。

于 2012-07-31T17:07:58.793 に答える