私は他の質問を見てきましたが、他の回答を自分のコードに統合しようとしてもうまくいきませんでした。
現時点では、マウスをホバーするとスライドダウンが表示され、画像をクリックするとポップアップが表示されます。このポップアップが表示されているときに背景をフェードアウトするだけです。
私のコードが現在どのように見えるかを試してデモンストレーションするために、jsfiddle を作成しました。
ポップアップが表示されているときにページ全体にフェード/薄暗い効果を作成しようとしていますが、ポップアップが閉じられると消えます。
ポップアップの背後に表示するスタイルとしてオーバーレイを作成しましたが、まだ運がありません。
関数に複数のクラスをアタッチしようとしましたが、コードが壊れてポップアップが表示されません。
これは私の .overlay css です:
.overlay{
background-image: url(http://dummyimage.com/600x400/000/000);
position:absolute;
top:0;
left:0;
width:100%;
z-index:100;
display:none;
text-align:left;
}
.toggledDiv {
height: 0px;
overflow: hidden;
z-index:10;
width: 130px;
padding-left:5px;
padding-right:5px;
margin-left: 15px;
background-color:white;
box-shadow: 5px 5px 5px #333;
}
これは、これを行う方法を説明するチュートリアルから作成した関数です。
// blur background
$(".overlay").css("height", $(document).height());
$(".toggleLink").click(function(){
$(".overlay").fadeIn();
return false;
});
$(window).bind("resize", function(){
$(".overlay").css("height", $(window).height());
});
これは私のフィドルです
何か案は？