Skip to main content

Javascript Close Box Dengan Klik Di Luar Box

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

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB