Membuat Modal Windows Sederhana Dengan HTML5

by | Apr 18, 2016 | Web Design | 0 comments

icon--html5-badgeHalo, Ketemu lagi dengan saya :). Apa kabar nya ?? Semoga baik yah, amin.

Pada kesempatan kali ini saya akan berbagi tutorial mengenai Cara Membuat Modal Windows Sederhana Dengan HTML5, Modal ini biasanya kita temukan hampir di setiap website, tujuan nya adalah tidak lain dan tidak bukan untuk menampilkan notifikasi dan cara lain untuk menarik perhatian pengunjung. Nah bagaimana cara membuat nya ? Langsung saja yuk ikuti langkah berikut.

1. Bukalah teks editornya masing-masing kemudian ketikan kode HTML berikut:

<dialog id="window">
    <h3>Hello World!</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!</p>
    <button id="exit">Exit</button>
</dialog>
<button id="show">Show Dialog</button>

2. Kalo Sudah silahkan sisipkan kode javascript berikut:

(function() {
    var dialog = document.getElementById('window');
    document.getElementById('show').onclick = function() {
        dialog.show();
    };
    document.getElementById('exit').onclick = function() {
        dialog.close();
    };
})();

3. Nah sekarang untuk sedikit modifikasi kita akan merubah button biar sedikit lebih bagus, coba ketikan kode CSS berikut:

#show {
  background:cyan;
  padding:10px;
  border-radius:3px;
  border:1px solid ;
}
#exit {
  background:cyan;
  padding:5px;
  border-radius:3px;
  border:1px solid ;
}

4. Kalo sudah jangan lupa disimpan, kemudian buka di browsernya masing-masing dan lihat hasil nya. Selesai

Cukup mudah yah ?

Baik sampai disini tutorial mengenai Cara Membuat Modal Windows Sederhana Dengan HTML5, Semoga bermanfaat, amin

Selamat Mencoba 🙂