Closing a floating div layer

@dmeglioMay 13.2007

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?

to post a comment

JavaScript

@gil_davisMay 14.2007 — #You might have success using onblur().

@dmeglioauthorMay 14.2007 — #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_ScorcherMay 14.2007 — #Register a click event listener for the document that checks whether the click occured in your div. Quick & dirty example

&lt;div id="box"
 style="height: 3em; position:absolute; top: 20%; left: 15%; border: 3px double"&gt;
 &lt;p&gt;Click anywhere outside this box to close it.
 &lt;/div&gt;
 &lt;script&gt;
 
 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"
 }
 &lt;/script&gt;

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

&lt;div id="box"
 style="height: 3em; position:absolute; top: 20%; left: 15%; border: 3px double"&gt;
 &lt;p&gt;Click anywhere outside this box to close it.
 &lt;/div&gt;
 &lt;script&gt;
 
 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"
 }
 &lt;/script&gt;

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

Closing a floating div layer

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Closing a floating div layer

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴