menu - jquery show using one button - close by clicking anywhere -

i trying create simple jquery show , hide box, using 1 button. want user able click around screen , opened div close.

has created similar?

i have added fiddle on how handle pop of boxes , attaching close events page clicks. can figure out if u go through comments in fiddle.

demo: http://jsfiddle.net/scriptshiva/zwxks/8/

html 1. create 3 blocks -1.1 1 parent (in case u have body) -1.2 1 mask (based on clicks on box, hide toggle box), need don't want hide box when user clicks on box itself, rather hide when user clicks outside box anywhere on page. -1.3 1 box toggle (this box going show/hide) 2. create button (shows box when hidden)

<div id='view-port'><!-- might body -->     <div id='toggle-mask'><!--mask screen trigger hide-->         <h3>click anywhere on mask close</h3>     </div>     <div id='toggle-box'><!--div box show or hide-->         <h3>box content goes here</h3>     </div>     <button id='toggle-button'><!--div button 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 button click     $('#toggle-mask').show();//show mask, simple div our close click     $('#toggle-box').show(); //show box }); $('#toggle-mask').click(function(){     $('#toggle-mask').hide(); //hides mask     $('#toggle-box').hide();  //hides box });