Tutorial box modal dasar yang Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari Ukuran kotak Modal,Tertanam kotak modal,
box modal ditampilkan dalam pop header halaman.
Kita bisa berada di elemen kontainer (seperti <div id="myModal"
) menggunakan ID yang unik, dan menambahkan .reveal-modal
kelas dan data-reveal
atribut untuk menambahkan kotak modal. Kita dapat digunakan pada setiap elemen data-reveal-id=" id "
" atribut Ali modal terbuka kotak. id id harus konsisten dengan wadah (contoh adalah "myModal").
Jika Anda ingin klik pada daerah di luar kotak untuk menutup kotak modal modal. Anda bisa menutup kotak modal tombol <a>
menambahkan label .close-reveal-modal
kelas.
Catatan: slider membutuhkan JavaScript. Jadi, Anda perlu menginisialisasi oundation JS:
Anda dapat menambahkan kelas berikut pada wadah kotak modal untuk mengatur ukuran kotak modal:
.tiny
: 30% Lebar .small
: 40% Lebar .medium
: 60% Lebar .large
: 70% Lebar .xlarge
: 95% Lebar .full
: lebar 100% dan tinggi Catatan: default pada tablet, notebook, komputer PC adalah 80% dari lebar di layar kecil adalah 100% lebar.
Anda dapat menanamkan kotak modal dalam kotak modal, Anda dapat menambahkan tombol pemicu baru pada kotak modal pertama. Anda harus mengatur sebuah id unik untuk kotak modal tertanam:
Kotak modal kedua akan menggantikan kotak modal pertama. Jika Anda ingin membuka sebuah kotak modal kedua tanpa menutup kotak modal pertama. Anda dapat menambahkan pada kotak modal kedua data-options="multiple_opened:true;"
;" sifat: