Banyak cara untuk membuat dialog window, namun kali ini kita akan membuat dialog window menggunakan CSS (Cascading Style Sheet). Banyak keunggulan dalam menggunakan CSS, CSS mempermudah kita mendesain suatu elemen tanpa perlu menggunakan logic bahasa pemrograman yang mungkin lebih rumit.
Pertama kita buat element html yang akan menjadi dialog window nantinya. Dialog window yang akan kita buat kali ini terdiri dari dua element utama yaitu header-dialog (bagian kepala dialog) dan content-dialog (bagian badan atau kontent dialog). Lihat seperti di bawah ini.
<div id="header-dialog"></div>
<div id="content-dialog"></div>
Setelah mengetahui element apa yang akan kita buat, selanjutnya kita menempatkan element inti itu pada wrapper (pembungkus) untuk mempermudah penataan dan merapikan komposisi dialog kita. Semua element inti itu kita masukkan pada satu wrapper utama dengan nama dialog-window. Wrapper utama ini lah sesungguhnya dialog window kita karena dia mencakup keseluruhan bagian dari dialog window. Lihat gambar di bawah ini.
<div id="dialog-window"> <!-- wrapper -->
<div id="header-dialog"></div>
<div id="content-dialog"></div>
</div> <!-- wrapper -->
Ingat!! Penggunaan metode wrapper atau parentship (istilah saya sendiri hehe) memudahkan kita mengelompokkan dan menyusun elemen berdasarkan tujuannya sehingga lebih rapi dan mudah untuk ditata.
Selanjutnya kita menambahkan element tambahan yang diperlukan pada masing-masing element utama (header-dialog dan content-dialog) tersebut, karena nantinya kita menginginkan ada komponen di dalam element header dan content.
Kita menambahkan element header-dialog-title dan close-btn dengan tag <button> pada header-dialog.
...
<div id="header-dialog">
<div id="header-dialog-title"><strong>Dialog Popup</strong></div> <!-- elemen header-dialog-title -->
<button id="close-btn">X</button> <!-- element close-btn -->
</div>
...
Pada element content-dialog kita cukup menambahkan teks dan tag element <cite> agar tertulis miring. Seperti berikut.
<div id="content-dialog">
SELAMAT DATANG DI TIPSGADGET
</br>
<cite>This message is only for you</cite>
</div>
sampai di sini struktur lengkap html kita terlihat seperti berikut ini.
<!doctype html>
<html>
<head>
<title>Dialog Popup Window</title>
<link type="text/css" href="dialog-window-style.css"> <!-- link ke file css -->
</head>
<body>
<div id="dialog-window">
<div id="header-dialog">
<div id="header-dialog-title"><strong>Dialog Popup</strong></div>
<button id="close-btn">X</button>
</div>
<div id="content-dialog">
SELAMAT DATANG DI TIPSGADGET
</br>
<cite>This message is only for you</cite>
</div>
</div>
</body>
</html>
Selanjutnya kita menuliskan definisi CSS untuk mebuat dialog window berdasarkan element-element yang telah dibuat dan berdasarkan bentuk dialog yang kita inginkan sebagaimana telah kita lihat pada gambar di atas. Buat sebuah file dengan nama dialog-window-style.css dan simpan pada folder yang sama dengan dokumen html. Isi atau ketikkan pada file css yang baru kita buat seperti berikut ini.
#dialog-window{
width: 480px;
min-height: 200px;
border: black solid 1px;
}
#header-dialog{
height: 24px;
border-bottom: black solid 2px;
background-color: cadetblue;
}
#header-dialog-title{
height: inherit;
float: left;
}
#close-btn{
float: right;
height: inherit;
width: 24px;
cursor: pointer;
}
#content-dialog{
min-height: inherit;
background-color: #f2fde0;
text-align: center;
}
Masing-masing element dalam dokumen html memiliki definisi style-nya secara sendiri-sendiri yakni ditandai dengan selector-nya, sebagaimana element dalam tag body ada lima element maka pada pendefinisian di CSS memiliki lima selector untuk mewakili maising-masing element tersebut.
Apabila kita mengikuti langkah-langkah seperti yang telah kita buat di atas, maka sejauh ini seharusnya penampakan pada browser sebagaimana berikut ini. Silahkan buka file html pada browser untuk melihatnya.
 |
| Dialog popup result preview bagian 1 |
Selanjutnya supaya lebih apik bentuknya dan terasa dialog popup-nya silahkan lanjutkan ke bagian berikutnya ya :)
Membuat Dialog Popup Window dengan CSS - Bagian 2
0 komentar:
Post a Comment