jquery - 1つのボタンを使用してjqueryを表示 - 任意の場所をクリックして閉じる

Question

1 つのボタンを使用して、単純な jquery 表示および非表示ボックスを作成しようとしています。ユーザーが画面のどこでもクリックできるようにすると、開いた div が閉じます。

誰かが似たようなものを作成しましたか?

Answer 1

ボックスのポップアップを処理する方法と、閉じるイベントをページのクリックに関連付ける方法に関するフィドルを追加しました。フィドルでコメントを調べれば、簡単に理解できます。

デモ: http://jsfiddle.net/ScriptShiva/zWXks/8/

HTML 1. 3 つのブロックを作成します。ユーザーがボックス自体をクリックしたときにボックスを非表示にするのではなく、ユーザーがページのどこかのボックスの外側をクリックしたときにボックスを非表示にします。-1.3 ボックスを切り替えるためのもの (これは、表示/非表示にするボックスです) 2. ボタンを作成します (非表示のときにボックスを表示します)

<div id='view-port'><!-- This might be your body -->
    <div id='toggle-mask'><!--Mask screen to trigger hide-->
        <h3>Click anywhere on mask to close</h3>
    </div>
    <div id='toggle-box'><!--DIV Box to show or hide-->
        <h3>BOX CONTENT GOES HERE</h3>
    </div>
    <button id='toggle-button'><!--DIV Button to trigger Show-->
        Show Box
    </button>
</div>

CSS

#view-port{
    position:relative;
    width:100%;
    height:100%;
    background:#f00;
}

#toggle-mask{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    color:#00F;
    text-align:center;
    display:none;
}
#toggle-button{
    margin-top:200px;
}
#toggle-box{
    position:absolute;
    width:60%;
    height:50%;
    margin:10% 20%;
    background:#fff;
    display:none;
    text-align:center;
}

jQuery

$('#toggle-button').click(function(){ // Function for button click
    $('#toggle-mask').show();//Show mask, simple div for our close click
    $('#toggle-box').show(); //Show Box
});
$('#toggle-mask').click(function(){
    $('#toggle-mask').hide(); //Hides mask
    $('#toggle-box').hide();  //Hides Box
});

Answer 2

これを試して：

$("#button").クリック(関数(){

$("#show_hide").show(1000,関数(){

$('body:not(#button)').click(function(){

$("#show_hide").hide(1000);

$(this).unbind("click");

});

});

});