Artikel ini dapat digunakan, disalin, dan disebarluaskan. Cukup cantumkan sumber asli. Jika isinya mengandung kebenaran, semoga memberi kebaikan bagi kita yang memanfaatkannya. Jika ada yang salah, mohon kiranya penulis dimaafkan. Dan sangat baik, jika kesalahan tersebut dapat diberitahukan kepada penulis.
Yanmarshus, 16 Oktober 2006, yan[at]daunsalam[dot]net

Memanfaatkan CSS untuk Popup Window

Adakalanya ketika membuat sebuah situs atau aplikasi berbasis web, dibutuhkan sebuah window popup untuk menampilkan sebuah daftar, atau data lainnya. Biasanya fungsi window popup ini hanya untuk menampilkan data jika memang diperlukan oleh pengguna.

Untuk keperluan ini bisa juga ditempuh dengan cara lain, yaitu memanfaatkan CSS dan Javascript. Gambarannya kira-kira sebagai berikut :

Sebagai contoh, kita akan membuat sebuah form isian berupa textbox. Disamping textbox ada sebuah button, jika ditekan, akan menampilkan sebuah popup window. Dalam popup window ini ada sebuah daftar, berupa kode. Kode ini apabila di-klik akan diisikan ke dalam textbox, lalu popup window akan tertutup.

Form untuk textbox dan button 
<form action="" name="f1" onSubmit="return false">
Kode <input type="text" name="kode" size="10">
<input type="button" value="..." onClick="buka_popup()">
</form>
Beberapa fungsi dalam Javascript yang diperlukan 
<script type="text/javascript">
function buka_popup() {
  document.getElementById("p1").style.visibility = "visible";
}
function tutup_popup() {
  document.getElementById("p1").style.visibility = "hidden";
}
function isi(kode) {
  document.f1.kode.value = kode;
  tutup_popup();
}
</script>
Kontainer untuk popup yang berisi data kode 
<div id="p1"
     style="visibility : hidden;
            border : solid 1px #ff0000;
            padding : 25px;
            margin : 25px;
            z-index : 9;
            position : fixed;
            top : 0px;
            left : 0px;
            background : #ffffc0">
<a href="javascript:isi('17322')">17322</a> Sepatu Kumal<br>
<a href="javascript:isi('89622')">89622</a> Ikat Pinggang Buluk<br>
<a href="javascript:isi('20812')">20812</a> Sendal Jepit Bolong<br>
<a href="javascript:isi('23788')">23788</a> Celana Cutbrai Belel<br>
<a href="javascript:isi('76544')">76544</a> Topi Robek Sebelah<br>
<form action="" onSubmit="return false">
<input type="button" value="Tutup" onClick="tutup_popup()">
</form>
</div>

Contoh untuk kode di atas adalah seperti berikut

Kode