Javascript Close Box Dengan Klik Di Luar Box

Masih ingat dengan postingan aku wacana memodifikasi profil Blogger menjadi ibarat profil Goole Plus? Atau mungkin Anda sedang menggunakannya, nah ada beberapa sahabat kompi yang menanyakan bagaimana caranya semoga Profil Box-nya dapat ditutup dengan klik di sembarang kawasan di luar box-nya.

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

DEMO

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

Jika ada beberapa box yang mempunyai dampak yang sama, tinggal tambahkan id di javascriptnya menjadi ibarat 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
Sumber https://www.kompiajaib.com/

Share this post