Cara Membuat Link Pop UP tanpa Javascript yang Rumit

Artikel ini terdiri dari 546 Kata, gak percaya?? Agan hitung aja sendiri,,
Estimasi Waktu membaca: 5 Menit, 27 Detik

Menampilkan Pop up atau jendela munculan kadang di perlukan untuk kenyaman pembaca, karena dengan begitu halaman terbuka pada ukuran halaman yang bisa di atur lebar tingginya, dan fungsi lain seperti scroll dan toolbar, Link popup bisa di buat tanpa javascript yang Rumit, di bawah ini adalah salah satu contoh link pop up dengan javascript sederhana.

Download

Silahkan klik tombol download di atas, maka terbuka halaman yang muncul, sementara halaman ini akan tetap, hal ini memudahkan pembaca agar tidak kehilangan halaman yang sedang di baca ketika di sela sela harus membuka satu link yang anda berikan.

Untuk membuat link seperti ini caranya cukup mudah, anda tinggal memasukan kode html seperti di bawah ini.

<a style="cursor: pointer; color: rgb(255, 0, 0);"
onclick="
window.open('http://download.haryantoblog.com/','','
scrollbars=yes,
menubar=no,
width=800,
resizable=yes,
toolbar=no,location=no,
status=no')">
Download
</a>

Jika anda gagal menggunakan kode di atas anda bisa menggunakan kode yang sudah di parsedi bawah ini. kode di bawah ini sebetulnya sama saja dengan yang di atas

<a style="CURSOR: pointer; COLOR: #ff0000" onclick=
"window.open(&#39;http://download.haryantoblog.com/&#39;,&#39;&#39;,&#39;
scrollbars=yes,
menubar=no,
width=800,
resizable=yes,
toolbar=no,
location=no,
status=no&#39;)">
Download</a>

Kode yang berwarna merah bisa anda ganti dengan URL halaman yang akan tampil dalam bentuk Pop UP, dan Width bisa anda rubah untuk menentukan lebar halaman yang akan tampil, jika anda ingin menentukan tinggi anda bisa juga menambahkan height: 900px jangan lupa selalu akhiri dengan tanda koma.

Untuk Alternative lain anda bisa juga menggunakan code seperti di bawah ini.

<a href="http://download.pastianto.com"
target="_blank"
onclick=
"window.open(this.href,&#39;&#39;,&#39;
scrollbars=yes,
menubar=no,
width=800,
resizable=yes,
toolbar=no,
location=no,
status=no&#39;)">
Download</a>

di sini saya memanfaatkan href terlihat dari kode setelah window.open saya menambahkanthis.href sebagai pengganti alamat URL dan menghilangkan Style Cursornya saya yakin anda sudah bisa mengotak-atik sendiri sesuai yang anda inginkan.

Yup jika anda ingin menggabungkan ini dengan cara yang sudah pernah saya tulis untuk membuat link yang terbuka dua halaman bisa juga anda tambahkan kodenya anda juga masih bisa menambahkan href untuk membuat agar ketika di klik selain halaman pop up nya yang terbuka juga halamann lain akan ikut terbuka.

Mungkin cara membuat Link Pup Up ini bisa kita manfaatkan untuk berbagai keperluan, misalkan ketika anda memuat gambar yang terlalu besar dan tidak muat di template postingan, maka anda bisa mensiasatinya dengan memasukan thumbnile nya saja di postingan kemudian di tambahkan kode di atas aga pada saat di klik gambar muncul dalam bentuk Pop up.

Artikel Terkait: