Javascript Close Click Outside the Box With Box

Still remember my post about modifying Blogger profile becomes like profile Goole Plus? Or maybe you're using it, well there are some friends of the company who asked how to keep his profile Box can be closed with a click anywhere outside his box. There is a javascript that can be used to cover the box with a click outside the box. So in appearance like the animated gif image above.

DEMO

Author: Adhy Suriady
How? Interested to try? Please add the following javascript code above the </ body>

<script>
    //<![CDATA[
    var boxArray=["profilbox"];window.addEventListener("mouseup",function(e){for(var r=0;r<boxArray.length;r++){var o=document.getElementById(boxArray[r]);e.target!=o&&e.target.parentNode!=o&&(o.style.right="-300px")}});
//]]>
</script>

profilbox is the id of its box. To eliminate the effect depends on its style css. To eliminate #profilbox using css style right:-300px so on javascriptnya using o.style.right="-300px" . If his style css use the display: none; then javascript be o.style.right="none"

If there are some boxes that have the same effect, just add id in javascriptnya be like this:

<script>
    //<![CDATA[
    var boxArray=["box1","box2","box3"];window.addEventListener("mouseup",function(e){for(var r=0;r<boxArray.length;r++){var o=document.getElementById(boxArray[r]);e.target!=o&&e.target.parentNode!=o&&(o.style.right="-300px")}});
//]]>
</script>