Javascript Close Box Dengan Klik Di Luar Box

Javascript Close Box Dengan Klik Di Luar Box

Bola Hero Gawai

Javascript Close Box Dengan Klik Di Luar Box

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×