Popup JavaScript

Popup yang dimaksud kali ini adalah munculnya sebuah window browser baru bila sebuah element diklik.

Penjelasan window.open() function

Sebenarnya dengan sebuah hyperlink kita bisa memunculkan sebuah window browser baru saat link tersebut diklik.

Tetapi di sini kita ingin visitor membuka sebuah browser window baru tanpa menggunakan sebuah anchor tag <a> atau link seperti biasa. Caranya adalah dengan menggunakan window.open() function.

Code HTML dan JavaScript popup:

<head>
<script type="text/javascript">
function myPopup() {
window.open( "http://www.google.com/" )
}
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup()" value="Coba klik button ini!">
</form>
<p onClick="myPopup()">Coba klik tulisan ini juga!</p>
</body>

Hasil code HTML dan JavaScript popup:



Coba klik tulisan ini juga!

Code window.open() function di atas bisa kita gunakan untuk berbagai macam element. Pada contoh diatas kita menggunakannya pada input tag dan paragraph tag.

Syntax window.open() function

window.open(URL,name,property)

Ada tiga argument (bagian) pada window.open() function:

  • URL yang akan dibuka
  • Nama window
  • Property atau settingan window

Ada beberapa property yang bisa kamu gunakan untuk mengatur browser window yang akan muncul.

  • dependent – subwindow akan tertututp jika parent window tertutup.
  • fullscreen – munculkan window browser dalam tampilan fullscreen.
  • height – tinggi dari window, dalam satuan pixel.
  • width – lebar window, dalam satuan pixel.
  • left – window offset dari sebelah kiri, dalam satuan pixel.
  • top – window offset dari sebelah atas, dalam satuan pixel.
  • resizeable – merperbolehkan atau tidak memperbolehkan visitor untuk mengatur ukuran window.
  • status – menampilkan atau tidak menampilkan status bar.

Property dependent, fullscreen, resizeable, dan status merupakan ON/OFF property. Masukkan nilai nol untuk tidak mengaktifkan atau masukkan nilai satu untuk menggunakan.

Contoh popup lanjutan

Setelah mendapatkan penjelasan diatas mari kita praktekkan function di atas dengan contoh yang lebih rumit.

Code HTML dan JavaScript lanjutan 1:

<head>
<script type="text/javascript">
function myPopup2() {
window.open( "http://www.google.com/", "myWindow",
"status = 1, height = 300, width = 300, resizable = 0" )
}
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup2()" value="Klik disini dong!">
</form>
<p onClick="myPopup2()">Klik disini dong!</p>
</body>

Hasil code HTML dan JavaScript lanjutan 1:



Klik disini dong!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>