Pada ksemepatan kali ini saya akan menjelaskan cara membuat modal gambar responsive dengan CSS dan JavaScript part1. Sebelumnya perlu teman-teman ketahui, modal adalah jendela kotak dialog atau yang biasa disebut dengan popup dan biasanya ditampilkan di atas halaman website. Seperti pada umumnya modal di Bootstrap, dimana modal tersebut sering digunakan untuk form HTML, namun pada penjelasan disini sedikit berbeda. Modal yang akan saya buat responsive pure css tanpa bootstrap, dan modal tersebut digunakan untuk menampilkan gambar sehingga ketika gambar di pilih atau ditekan akan menampilkan modal popup sesuai dengan gambar yang di tekan. Dan untuk membuatnya kalian bisa ikuti tahapan yang saya berikan dibawah ini.

Berikut Tahapannya :

  • Teman-teman buat terlebih dahulu satu buah file html dengan nama index.html
  • Jika sudah, selanjutnya ketikan kode seperti berikut :

  • Sampai disini teman-teman hanya tinggal membuat style css untuk menjadikan gambar dan popup tersebut menjadi responsive.

Dan akan saya jelaskan cara membuat modal gambar responsive dengan CSS dan JavaScript pada sesi berikutnya, semoga bermanfaat.