Click to show
Click on box to show, click outside to hide
HTML
<body>
<p>Click on the box to show the div</p>
<div id="toolbar">
<div id="searchbox">
<p>Click anywhere else to hide the div. But on iOS you need to click on the image</p>
</div>
</div>
<img src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" width="240" height="240" />
</body>
CSS
#toolbar {
width:240px;
height:240px;
background-color:#f2f2f2;
}
#searchbox {
position:relative;
width:240px;
height:240px;
top:120px;
background-color:#000;
display:none;
}
#searchbox p {
color:#fff;
}
JavaScript
$(document).ready(function () {
$('#toolbar').click(function (e) {
$('#searchbox').fadeIn();
e.stopImmediatePropagation();
});
$(document).click(function (e) {
$('#searchbox').fadeOut();
});
});