Membuat Modal Dialog dengan CSS3

Modal dialog adalah sebuah tampilan jendela yang muncul untuk menampilkan suatu informasi tambahan. Biasany modal dialog ini dimunculkan saat pertama kali website dikunjungi / juga ketika ada aksi tertentu, seperti klik tombol atau melakukan penyimpanan data.

Contoh tampilan modal dialog

Bila mengeklik X maka kotak dialog akan hilang dan halaman website akan tampil normal seperti biasa. Caranya gampang untuk membuat modal dialog hanya dengan CSS3 tanpa menggunakan Javasript, Create new html dan tuliskan skrip berikut ini.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Modal Dialog</title>
</head>

<body>
<div id=”wrapper”>
<!–tombol–>
<a href=”#muncul” class=”tombol”>Click Me!</a>
<!–popup–>
<a href=”#” id=”muncul”></a>
<div>
<h2>Kotak Modal Dialog</h2>
<p>Ini adalah Modal Dialog yang dibuat dengan CSS3 tanpa Javascript</p>
<!–close–>
<a href=”#close”></a>
</div>
</div>
</body>
</html>

Ketika link Click Me!! untuk menampilkan contoh dari kotak dialog modal. Terdapat tag div yang mempunyai class popup yang berfungsi sebagai modal dialog. Berikutnya tambahkan perintah CSS di dalam tag <head>. Dengan menambahkan tag <style> tambahkan perintah CSS untuk mengatur layout. ikuti langkah berikut ini:
1. Pertama atur dahulu layout dasarnya seperti ini:
div{margin:auto}
div#wrapper{
width:300px;
padding:20px;
}
2. Bentuk sebuah tombol dari tag anchor yang bertuliskan Click Me!! dengan perintah:
a.tombol{
background-image:-webkit-linear-gradient(top,#666,#999);
border:#cccccc;
border-radius:8px;
color:white;
padding:10px;
margin:auto;
}
3. Hasilnya akan muncul tombol:
pic2
4. Tampilan untuk kotak modal dialog juga perlu diatur.
div.popup{
background-color:#f2f2f2;
border:3px solid #ccc;
display:inline-block;
top:40%;
left:50%;
opacity:0;
padding:15px;
position:fixed;
text-align:justify;
visibility:hidden;
z-index:10;
-webkit-transform:translate(-50%,-50%);
border-radius:15px;
-webkit-transition:opacity .5s, top .5s;
}
5. Sementara nilai dari visibility = visible dan opacity = satu. Perintah ini memunculkan kotak dialog tetapi nanti disembunyikan dan akan muncul lagi setelah tombol di klik.
6. Tambahkan tombol Close pada sudut kanan atas. dengan tag anchor yang diberi class close.
a.close{
background-color:#fff;
border:3px solid #ccc;
border-radius:15px;
height:30px;
line-height:30px;
position:absolute;
right:0;
text-align:center;
text-decoration:none;
top:-15px;
right:-10px;
width:30px;
}

a.close:before{
color:rgba(0,0,0,0.8);
content:”X”;
font-size:24px;
}

a.close:hover{
background:red;
}
7. Tampilan sementara dari kotak modal yang dibuat dapat dilihat seperti gambar dibawah. Ada sebuah tombol dan sebuah kotak dengan tombol Close di sebelah kanan atas.
pic3
8. Perlu menambahkan layer overlay. Layer ini akan menutupi isi dari halaman belakang kotak modal dialog.
<!–popup–>
<a href=”#” id=”muncul”></a>
9. Tag di atas akan memunculkan sebuah lapisan untuk menutupi konten di belakangnya. Layer yang dimaksud agar pengunjung dapat fokus dengan isi pesan di dalam kotak tersebut. Atur tampilannya dengan perintah berikut.
#muncul{
background-color:rgba(0,0,0,0.6);
bottom:0;
cursor:default;
left:0;
opacity:0;
position:fixed;
right:0;
top:0;
visibility:hidden;
z-index:1;
-webkit-transition:opacity .5s;
}
10. Sementara isi nilai dari opacity dan visibility masing-masing dengan 1 dan visible dahulu untuk memunculkan layer overlay ini.
pic4
11. Setelah layout utama dari modal dialog sudah selesai. sekarang waktunya menyembunyikan layer overlay dan kotak dialog. Ubah nilai opacity menjadi 0 dan ubah nilai visibility menjadi hidden pada div.popup{} dan pada #muncul{}. Layer overlay dan kotak dialog akan hilang dari tampilan.
12. Sekarang untuk memnuculkan kembali, perlu bantuan dari selector :target. Jadi saat tombol Click Me!! di klik maka akan mengarahkan target ke arah elemen yang mempunyai id muncul (sesuai dengan isi dari href(). setelah itu layer overlay (#muncul) dan kotak dialog modal (div.popup) juga harus dimunculkan.

#muncul:target{
visibility:visible;
opacity:1;
}

#muncul:target+.popup{
top:50%;
opacity:1;
visibility:visible;
}

Tambahan sintaks CSS di atas untuk memunculkan layer overlay dan kotak dialog modal pada saat tombol diklik. Dapat dilihat pada skrip di atas setelah tombol di klik maka target akan aktif sehingga untuk memunculkan overlay dan modal maka nilai dari visibility berubah menjadi visible dan opacity menjadi satu.

Untuk menutup kotak dialog, tinggal di klik tombol close di kanan atas atau klik pada layer overlay. Selamat mencoba…

Script lengkap bisa di download di:

Link

 

Leave a Reply

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