Secara ringkas, Modal merupakan tetingkap kecil yang terapung pada paparan laman web sambil menggelapkan keseluruhan ruang lain pada laman tersebut.

Kaedah ini memaksa pengguna supaya fokus kepada tetingkap tadi sahaja.

Kedudukan elemen Modal biasanya ditetapkan menggunakan arahan position: fixed.

Oleh itu, adalah digalakkan supaya kod atur cara Modal ditulis terlebih dahulu berbanding kod lain.

Tanpa membuang masa, mari kita teruskan dengan latihan minggu ini.

Semakan

Menerusi latihan tadi, kita telah mepelajari kaedah memaparkan tetingkap kecil Modal. Tetingkap ini ditetapkan menggunakan kelas modal yang dimasukkan ke dalam elemen <div> yang sesuai.

Terdapat tiga elemen utama Modal yang boleh diubah suai oleh pengatur cara iaitu Header, Body dan Footer.

Untuk menambah animasi kepada tetingkap tadi, kelas modal boleh dipadankan terus dengan kelas fade seperti contoh <div class=modal fade>.

Soalan

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan.

1. Ubah saiz teks pada modal-header

2. Papar imej di dalam modal-body

3. Tambah satu butang di dalam modal-footer

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila tinggalkan komen anda di www.farizgaskin.com dan kami akan cuba jawab sepantas mungkin. Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!