0

これは私がやったことです： 

$('#keks-overlay').hide();  

$('#click').click(function(){
    $('#keks-overlay').toggle(450);
});

$('#close-overlay').click(function(){
    $('#keks-overlay').toggle(250);
});

jsFiddle: http://jsfiddle.net/rHKkD/22/

これは問題なく動作しますが、「X」(#close-overlay) をクリックすることによってのみ表示/非表示 (切り替え) が行われます。

ファンシーボックス効果のようなことをしたいと思います。全身のどこかをクリックするとフェードアウトします。

ご協力いただきありがとうございます。

4

2 に答える 2

1

divページ全体 (またはドキュメント自体) を含む にイベント ハンドラーを追加し、hide()そのハンドラーにオーバーレイを追加できます。

$("#somebody").click(function() {
    $('#keks-overlay').hide(250);
});

ただし、オーバーレイ自体のクリックが をトリガーするのを防ぎたい場合はhide()、false を返すイベント ハンドラーをオーバーレイに追加するか (イベントがバブリングしないようにするため)、div残りの部分を保持する の外側にオーバーレイを配置することができます。コンテンツ (オーバーレイにabsolute配置があるため機能します)。

フィドルを更新して、2 番目の方法を示しました。

于 2012-07-04T21:01:09.990 に答える
1

試す (ドキュメントの準備ができたら)

var inoverlay = false;
$('#keks-overlay').hover(function() {
    inoverlay = true;
}, function() {
    inoverlay = false;
});

次に、ドキュメントのすべてのクリックを取得し、inoverlay 変数を確認します。false の場合はオーバーレイを非表示にし、そうでない場合は何もしません。最初にオーバーレイを開くボタンがある場合は、ドキュメントのクリックをインターセプトするときにクリックされているのはそのボタンではないことを確認してください。

$(document).click(function(e){
    if(inoverlay && (e.target.attr('id') != buttonForOverlay.attr('id') )) {
        closeOverlay();
    }
});
于 2012-07-04T20:37:38.737 に答える