Membuat Jendela (Window) Modal Dengan CSS dan Javascript

Dalam beberapa hari saya menghabiskan waktu untuk mencari referensi mengenai pembuatan jendela (window) modal. Hasilnya saya menemukan beberapa artikel yang menarik untuk dijadikan sebagai referensi tentang window modal tersebut. Keuntungan dari penerapan window modal adalah untuk membatasi user agar tidak mengakses bagian lain dari suatu aplikasi.
Misalkan pada saat user/pengunjung melakukan input data baru dalam waktu yang bersamaan kita tidak mengijinkan user tersebut untuk mengakses menu aplikasi. Langkah-langkah pembuatan window modal adalah sebagai berikut :
1. Membuat DIV window modal
DIV window modal merupakan bagian halaman yang akan kita jadikan sebagai window modal :

Konten tempat window modal ada disini.

Tutup window

2. Membuat CSS
CSS berfungsi untuk mengatur tata letak dan tampilan dari window modal yang akan kita buat :

#window_modal {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
z-index: 1000;
}
#window_modal div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
}

margin: 100px auto; artinya kita meletakkan window modal tersebut sejauh 100 pixel dari bagian atas konten. Anda bisa mengganti sesuai dengan kebutuhan.

3. Javascript
Setelah kita membuat tampilan seperti di atas kita akan mendapati sebuah tampilan kosong, meskipun sebelumnya kita telah menyisipkan tulisan “Konten tempat window modal ada di sini”. Lantas bagaimana jika kita ingin menampilkan bagian tersebut ? jawabannya adalah dengan menggunakan javascript dan link untuk menjalankan javascript tersebut. Berikut ini adalah kode javascriptnya :

function window_modal() {
el = document.getElementById("window_modal");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

Setelah itu langkah yang terakhir adalah membuat link (tombol) untuk menampilkan window modal yang kita buat :

Tampilkan window modal

Jika semua bagian di atas digabung, akan menjadi :



Tampilkan window modal

Konten tempat window modal ada disini.

Tutup window

Sumber : http://sitening.com/blog/2006/03/29/create-a-modal-dialog-using-css-and-javascript/