box modal dasar yang
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:
contoh
<Jenis Tombol = "tombol" class = "tombol" Data-mengungkapkan-id = "myModal"> Klik Untuk Buka Modal </ button>
<! - The Modal Content ->
<Div id = "myModal" class = "mengungkapkan-modal" Data-mengungkapkan>
<H2> Heading di Modal. < / H2>
<P> Beberapa teks dalam modal yang . </ P>
<P> Beberapa teks dalam modal yang . </ P>
class <A = "close-reveal -modal"> & kali; </ a>
</ Div>
<! - Initialize Yayasan JS ->
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>
Coba »
Ukuran kotak Modal
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.
contoh
Coba »
Tertanam kotak modal
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:
contoh
<A Href = "#" class = "button" data-reveal-id = "myModal"> Klik Untuk Buka Modal </ a>
<! - Pertama Modal ->
<Div id = "myModal" class = "mengungkapkan-modal" Data-mengungkapkan>
<H2> Modal Pertama </ h2 >
<P> Beberapa teks .. </ p>
<P> <a href = "#" data-reveal-id = "secondModal" class = "button"> Terbuka Kedua Modal </ a> </ p>
class <A = "close-reveal -modal"> & kali; </ a>
</ Div>
<! - The Second Modal ->
<Div id = "secondModal" class = "mengungkapkan-modal" Data-mengungkapkan>
<H2> Tada! Kedua Modal < / h2>
<P> Beberapa teks .. </ p>
class <A = "close-reveal -modal"> & kali; </ a>
</ Div>
Coba »
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:
contoh
Coba »