jquery show使用一个按钮 - 通过点击任意位置关闭

Question

我尝试使用一个按钮创建一个简单的jquery show和hide box。我希望用户能够点击屏幕周围的任何位置，打开的div将关闭。

有没有人创造过类似的东西？

Answer 1

我添加了一个关于如何处理弹出框并将关闭事件附加到页面点击的小提琴。如果您通过小提琴中的评论，您可以轻松搞清楚。

DEMO：http://jsfiddle.net/ScriptShiva/zWXks/8/

<强> HTML  1.创建三个块     -1.1父母一个（在你的情况下，你有一个身体）     -1.2一个用于掩码（基于此框的点击，我们将隐藏切换框），需要这是我们不想隐藏框时     用户点击框本身，而不是在用户点击时隐藏它     页面上任何位置的外部框。     -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

工作演示http://jsfiddle.net/cse_tushar/5Ng49/

显示和隐藏

的 JS

$(document).ready(function(){
    $('*').click(function(){
        $('#div1').toggle();
    });
});

隐藏

的 JS

 $(document).ready(function(){
        $('*').click(function(){
            $('#div1').hide();
        });
    });

使用按钮显示并隐藏并单击任意位置

的 HTML

<div id="div1">dsfsd</div>
<input type="button" id="b1" value="Hide"/>

的 JS

$(document).ready(function(){
    $('*,#b1').click(function(){
        $('#div1').toggle();
        if($('#b1').attr('value') == 'Show'){
            $('#b1').attr('value','Hide');
        }else{
            $('#b1').attr('value','Show');
        }
    });
});

工作演示http://jsfiddle.net/cse_tushar/5Ng49/1/

如果您不希望按钮更改文本而不是： -

的 HTML

<div id="div1">dsfsd</div>
<input type="button" id="b1" value="Show/Hide"/>

的 JS

$(document).ready(function(){
    $('*,#b1').click(function(){
        $('#div1').toggle();
    });
});

Answer 3

试试这个：

$（“＃button”）。点击（function（）{

$（“＃show_hide”）。show（1000，function（）{

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

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

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

});

});

}）;