Javascript Close Box Dengan Klik Di Luar Box

Ditulis oleh: Adhy Suryadi

Ditulis pada: 5/26/2015

Masih ingat dengan postingan saya tentang memodifikasi profil Blogger menjadi seperti profil Goole Plus? Atau mungkin Anda sedang menggunakannya, nah ada beberapa sahabat kompi yang menanyakan bagaimana caranya agar Profil Box-nya bisa ditutup dengan klik di sembarang tempat di luar box-nya.

Ada sebuah javascript yang bisa kita gunakan untuk menutup box dengan klik di luar box. Sehingga penampakannya seperti pada gambar animasi gif di atas tadi.


Bagaimana? Tertarik untuk mencobanya? Silahkan tambahkan javascript di bawah ini di atas kode </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 adalah id dari box-nya. Untuk efek menghilangkannya tergantung dari css style-nya. Untuk menghilangkan #profilbox ini menggunakan css style right:-300px jadi pada javascriptnya menggunakan o.style.right="-300px" Jika css style-nya menggunkan display:none; maka javascript-nya menjadi o.style.display="none"

Jika ada beberapa box yang memiliki efek yang sama, tinggal tambahkan id di javascriptnya menjadi seperti ini

<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>

Sumber: https://www.developphp.com/video/JavaScript/Click-Outside-Close-Menu-Box-Tutorial