0

基本的に、私はすべてのコンテンツのページを.boxに配置しています。

必要なのは、.boxをクリックして、オーバーレイに.boxのコンテンツがあるときにオーバーレイを作成することです。

私はjQueryを初めて使用するため、正しく実行しているかどうかは正確にはわかりません。クラス.overlayを作成し、クリックするとクラスを.boxに追加しましたが、まったく機能していません。これは私のコードなので、誰かが私を正しい方向に導いてくれることを願っています。 

.overlay {
position: fixed;
top:0;
left:0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
}

(function () {

$(document).ready(function(){
       $(".box").click(function(){
           $(".overlay").removeClass("overlay");
           $(this).addClass("overlay");
   });   

       $(document).click(function(){
           $(".overlay").removeClass("overlay");
       });
   });
}(jQuery));

html

<div class="box overlay">
<p>content></p>
</div>
4

1 に答える 1

0

あなたはこのコードを持っているので

$(document).click(function(){
           $(".overlay").removeClass("overlay");
       });

クリックイベントがあるたびにクラスが削除overlayされます。質問に従って、のクリックで削除する必要があるため.box、このコードは必要ありません。特定の要素のクリックで削除する場合は、適切なセレクターを指定してください。 id、classなどの要素の場合

コメントに従って編集：

現在、要素のロード時にオーバーレイクラスを追加しているため、問題が発生しています。

HTMLを次のように変更します

<div class="box">
   <p>content></p>
</div>

あなたのJavaScript

$(".box").click(function() {
    $(".overlay").removeClass("overlay");
    $(this).addClass("overlay");
});

デモ

于 2012-05-16T02:27:48.817 に答える