Closing a floating div layer

[dmeglio]

I'm trying to make a floating div. Actually, something very similar to the "Search" floating div on this forum. Anyway, I want to make it so when the user clicks somewhere outside of the search div, it closes itself (again, like the search box on this forum does). Does anyone know how I can detect a click that occurs anywhere outside of the search box?

[gil davis]

You might have success using onblur().

[dmeglio]

onblur doesn't trigger for div's. According to the HTML 4 spec, it only triggers for, A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON. IE triggers it for a DIV, but not Firefox.

[Orc Scorcher]

Register a click event listener for the document that checks whether the click occured in your div. Quick & dirty example

<div id="box"
 style="height: 3em; position:absolute; top: 20%; left: 15%; border: 3px double">
	<p>Click anywhere outside this box to close it.
</div>
<script>

document.onclick = function (e) {
	e = e || event
	var target = e.target || e.srcElement
	var box = document.getElementById("box")
	do {
		if (box == target) {
			// Click occured inside the box, do nothing.
			return
		}
		target = target.parentNode
	} while (target)
	// Click was outside the box, hide it.
	box.style.display = "none"
}
</script>

[uberzev]

Originally Posted by Orc Scorcher

Register a click event listener for the document that checks whether the click occured in your div. Quick & dirty example

<div id="box"
 style="height: 3em; position:absolute; top: 20%; left: 15%; border: 3px double">
	<p>Click anywhere outside this box to close it.
</div>
<script>

document.onclick = function (e) {
	e = e || event
	var target = e.target || e.srcElement
	var box = document.getElementById("box")
	do {
		if (box == target) {
			// Click occured inside the box, do nothing.
			return
		}
		target = target.parentNode
	} while (target)
	// Click was outside the box, hide it.
	box.style.display = "none"
}
</script>

Great script Orc, any chance of getting a version that has a link to re-open the box?