jquery - jquery 使用一个按钮显示 - 单击任意位置关闭

Question

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

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

Answer 1

I have added a fiddle on how to handle pop up of boxes and attaching close events to page clicks. You can figure out easily if u go through the comments in fiddle.

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

HTML 1. Create three blocks -1.1 One for parent (In your case u have a body) -1.2 One for mask (Based on clicks on this box, we will hide the toggle box), Need for this is we don't want to hide the box when user clicks on the box itself, rather we hide it when a user clicks outside box anywhere on the page. -1.3 One for the box to toggle (This is box we are going to show/hide) 2. Create a button (Shows box when hidden)

<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").click(function(){

$("#show_hide").show(1000,function(){

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

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

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

});

});

});

Answer 3

工作演示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();
    });
});