Question: I trying to create a simple jquery show and hide box, using one button. I want the user to be able to click any where around the screen and the opened div will close. 

has anyone created anything similar?

Answer: 
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
});

```
Working Demo <http://jsfiddle.net/cse_tushar/5Ng49/>

SHOW and HIDE

**js**
======

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

```

HIDE

**js**
======

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

```

SHOW and HIDE using Button and clicking Anywhere

**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');
        }
    });
});

```

Working Demo <http://jsfiddle.net/cse_tushar/5Ng49/1/>

if you don't want button changing text than:-

**HTML**
========

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

```

**JS**
======

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

```