Salam ceria buat semua pembaca budiman. Kita bertemu kembali di dalam ruangan Genius Corner minggu ini, bersama latihan Bootstrap bahagian ke-11. Dalam latihan kali ini, kita akan mempelajari kaedah memaparkan tetingkap kecil di atas laman web yang dikenali dengan nama Modal.
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
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
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!
Tidak mahu terlepas? Ikuti kami di
BERITA BERKAITAN
Anwar kritik dakyah ketuanan Melayu, agama demi kepentingan peribadi
PSM persoal pengumuman hospital baharu Bandar Enstek
