Cara Membuat Pop-up Window

Pop-up Window berfungsi menampilkan sebuah objek seperti halaman web, gambar atau dokumen yang lain pada jendela browser yang baru. Sehingga pembaca tidak kehilangan halaman yang sedang atau belum selesai dibaca. Dengan demikian pada saat bersamaan pembaca dapat membuka sebuah link tanpa harus meninggalkan halaman tersebut.
Belajar JavaScript kali ini akan memberi contoh penggunaan JavaScript Pop-up Window untuk  menampilkan sebuah objek gambar.

Perhatikan contoh dibawah ini :




Berikut kode JavaScript Pop-up Window contoh diatas :

<script type="text/javascript">
function open_gambar()
{
window.open("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeOzi__ryvhVZyVz-vHewzinNIW9qmM1VAxvlQ2ADnPVllkXdfAOt_5yZA2b8KVTE3k1pdBlgoVNHK8bhzYgQxv7Q_kqSeN1FC5KKofBDFEMT0ttV25UffrK739pOdjsb7KLM4PFYDVqAH/s400/Logo+cara+buat+web+gratis.jpg"," _blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");
}
</script>

<center>
<img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeOzi__ryvhVZyVz-vHewzinNIW9qmM1VAxvlQ2ADnPVllkXdfAOt_5yZA2b8KVTE3k1pdBlgoVNHK8bhzYgQxv7Q_kqSeN1FC5KKofBDFEMT0ttV25UffrK739pOdjsb7KLM4PFYDVqAH/s100/Logo+cara+buat+web+gratis.jpg" width="200" />
<form>
<input type="button" value="Perbesar Gambar" onclick="open_gambar()">
</form>
</center>

Catatan : Ganti Ulr lokasi gambar dengan milik anda.

Ok...., Silahkan anda coba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Related

Cara membuat pop up box

Pop up box adalah salah satu elemen yang sangat berguna pada web ataupun blog. Berbeda dengan pop up windows, Pop up box muncul pada tab atau halaman yang sama, bukan terbuka pada tab windows baru. Po...

Cara membuat Image Preview menggunakan tombol

Image Preview ini berfungsi untuk melihat gambar dalam ukuran yang lebih bersar, dan cara kerjanya menggunakan tombol perbesar dan tombol normal, yaitu bila diklik tombol perbesar maka gambar menjadi ...

Cara membuat Image Preview menggunakan jQuery

Memberi efek Image Preview pada web atau blog juga diperlukan, terutama bagi web atau blog yang berhubungan dengan gambar, foto ataupun desain. Dengan menambahkan efek Image Preview, tentu sangat ber...

Posting Komentar

  1. Tips dan triknya mantab dan patut dipraktekan. Oh ya kalo untuk blog wordpress sperti punyaku MYOB Konsultan bisa ga gan. Thanks informasinya..

    BalasHapus
  2. Kalau setiap link yang di klik maka jd ada pop up gimana gan?

    BalasHapus
  3. kalau untuk wordpress hosting gmna gan??

    BalasHapus

emo-but-icon
:noprob:
:smile:
:shy:
:trope:
:sneered:
:happy:
:escort:
:rapt:
:love:
:heart:
:angry:
:hate:
:sad:
:sigh:
:disappointed:
:cry:
:fear:
:surprise:
:unbelieve:
:shit:
:like:
:dislike:
:clap:
:cuff:
:fist:
:ok:
:file:
:link:
:place:
:contact:

Hot in weekRecentComments

Hot in week

Recent

Slide down random post

Satu lagi pengembangan fitur slide show terbaru dari saya. Fitur ini saya beri nama "Slide down random post", sebab fitur ini saya adopsi dan saya kembangkan dari aplikasi recent post yang tampil seca...

Slice Random Recent Post

Dilihat sekilas memang recent post ini tampak seperti biasa, dan hanya tampil judul artikel saja. Tapi sebenarnya recent post ini memiliki tampilan yang lebih, yaitu effek slice atau sebuah lapisan ya...

Buat Toko Online dengan blogger tidak kalah Profesional

Bersamaan dengan Lounching Perdana Toko Online "Jogja Smart", saya ingin berbagi pengalaman  dan pengetahuan tentang blogger kepada sobat - sobat blogger yang mampir di blog tercinta ini.Kendati ...

Cara mengaktifkan Thread Comments blogger

Melihat penggunaan Thread Comments yang ada pada template bawaan blogger, buat saya sangat disayangkan bila dilewatkan. Sebab Thread Comments ini memiliki fitur yang lebih dibanding form komentar yang...

Cara Pasang Rating Bintang Rich Snippets

Bagi yang belum atau masih kesulitan memasang Rating Bintang dan Rich Snippets, berikut langkah yang paling pas dan mudah untuk memasang Rating Bintang dan Rich Snippets.Sebelum menuju caranya, sebaik...

Comments

Manly tours:

artikel ini beserta kode kodenya untuk di passang di website blogger ya mas keren juga mas saya kepingin tapi saya tidak menggunakan website blogger yang saya gunakan website word press, kalau begitu...

peluang usaha:

wah.. keren nih..tanks gan dah share

muhammad isra:

kalau batas waktu 10, apa tidak terlalu cepat gan....salam sukses selalu...ditunggu kunjungan balik dan kritik sarannya......

item