Skip to main content
KOMPI AJAIB

follow us

Javascript Close Box Dengan Klik Di Luar Box

Baca juga:

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

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar