Breaking News
Loading...
Minggu, 06 Maret 2016

Info Post
Cara Mudah Membuat Modal Box Dengan CSS - Modal box merupakan kotak dialog yang ditampilkan pada halaman website. Modal digunakan untuk memberikan sebuah informasi atau konfirmasi sebuah tindakan atau eksekusi yang dilakukan oleh user. Bagaimana cara membuat sebuah modal box?. Modal box biasanya dibuat dengan menggunakan bahasa pemograman jquery. Namun sekarang saya akan mencoba membuat modal box dengan menggunakan CSS. Bagaimana caranya.. Silakan ikuti tutorial cara mudah membuat modal box dengan css.

Membuat Modal Box


1. Buatlah file modal.html dan ketikan kode html seperti berikut :


Dari kode diatas dapat kita lihat terdapat link dengan href=#mymodal, maksudnya ketika link tersebut diklik maka div dengan id=mymodal akan ditampilkan.

2. Buatlah kode CSS seperti gambar dibawah ini :

kode css modal box dengan css

Perhatiakan kode css proses hide dan show diatas. Pada saat halaman di load maka class modal akan disembunyikan dengan cara memberikan nilai top:-200px. class modal:target merupakan fungsi ketika modal dipanggil maka class modal akan ditampilkan dengan mengatur nila top:0. Kemudian simpan file htmlnya kemudian jalankan pada browser. Untuk melihat modal box silakan klik tombol klik info. maka akan muncul modal box seperti berikut.

membuat modal box dengan css

Kita telah berhasil membuat modal box dengan css. Silakan download kodenya dibawah ini.

Download Source Code


Sumber : Panduan Belajar Website

6 komentar:

  1. gan, modal box ini mirip efek tooltip yang melayang itu kan ?

    BalasHapus
  2. mantap gan, bisa buat aplikasi juga.

    BalasHapus
  3. gan, ane request buatin tutorial javascript confirm untuk hapus data. terimakasih gan..

    BalasHapus

Komentar jangan mengandung SPAM dan SARA