Skip to main content
KOMPI AJAIB

follow us

Mau memiliki tema blog seperti tema blog Kompi Ajaib ini? Silahkan baca postingan ini ➜ Template Kompi Ajaib AMP V3
Tambahkan aplikasi Kompi Ajaib di smartphone tanpa install, klik ikon 3 titikdi browser Chrome kemudian pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi Kompi Ajaib dari layar utama smartphone Anda.

×

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

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