Dalam pelajaran ini, kami terutama akan belajar tentang plug-in kotak modal di Bootstrap, yang merupakan plug-in fungsi pop-up yang sangat umum untuk situs web interaktif.
Untuk informasi lebih lanjut tentang plug-in kotak modal bootstrap, silakan klik topik khusus "tutorial penggunaan modal bootstrap" untuk dipelajari. Saya harap Anda menyukainya, jadi lanjutkan di bawah
satu. Penggunaan Dasar
Komponen pop-up menggunakan kotak modal membutuhkan tiga lapisan elemen kontainer div, yaitu modal (lapisan deklarasi modal),
dialog (lapisan deklarasi jendela), konten (lapisan konten). Di lapisan konten, ada tiga lapisan, yaitu header, tubuh, dan footer.
// Contoh Dasar
<!-- Modal declaration, show indicates display --><div tabindex="-1"> <!-- Window declaration--> <div> <!-- Content declaration--> <div> <!-- Header--> <div> <button type="button" data-dismiss="modal"> <span>×</span> </button> <h4>Member login</h4> </div> <!-- Subject--> <div> <p> Anggota tidak dapat masuk ke anggota untuk sementara </p> </div> <!-footnote-> <div> <tombol type = "Tombol"> Daftar </button> <Tombol Type = "Tombol"> Masuk </button> </div> </div> </div> </div> </div> </div> </div> </div>
Jika Anda ingin kotak modal disembunyikan secara otomatis dan kemudian muncul dengan mengklik tombol, Anda perlu melakukan operasi berikut.
//Remove the show in the modal box and add an id<div id="myModal">//Click to trigger the modal box to display <button data-toggle="modal" data-target="#myModal"> Click pop-up window</button>//There are three sizes of pop-up windows, which are normal by default, and there are lg (large) and sm (small)<div><div>//The fading effect can be Set <Div ID = "MyModal"> // Gunakan fluida dalam sistem grid di bagian tubuh utama <!-Badan Utama-> <verv> <div> <div> <div> 1 </div> <div> 1 </div> <div> 1 </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div>
dua. Instruksi penggunaan
Setelah pengenalan penggunaan dasar, mari kita lihat berbagai penggunaan penting plug-in. Semua plug-in didasarkan pada JavaScript/jQuery. Kemudian, ada empat elemen: penggunaan, parameter, metode dan peristiwa.
1. Penggunaan
Tipe pertama: dapat dilewatkan melalui atribut data
// data-koggledata-koggle = "modal" data-target = "#mymodal"
kacamata data menunjukkan jenis pemicu
Target data menunjukkan node yang dipicu
Jika Anda tidak menggunakan <button>, tetapi <a>, di mana target data juga dapat menggunakan href = "#mymodal"
mengganti. Tentu saja, kami sarankan menggunakan target data. Selain dua atribut yang dideklarasikan, kilat data dan target data, ada beberapa opsi yang tersedia.
2. Parameter
Efek dapat dikontrol dengan mengatur deklarasi atribut data-* pada elemen HTML.
// latar belakang putih dan klik untuk tidak menutup data-backdrop = "false" // tekan ESC untuk tidak menutup data-keyboard = "false" // inisialisasi tersembunyi. Jika klik tombol dipicu, klik pertama tidak akan ditampilkan, dan kedua kalinya ditampilkan. data-show = "false" // muat index.html sekali ke wadah href = "index.html"
Tentu saja, itu juga dapat diatur langsung di JavaScript.
// mendeklarasikan $ ('#myModal') melalui jQuery.modal ({show: true, latar belakang: false, keyboard: false, remote: 'index.html',});3. Metode
Jika jendela pop-up tidak ditampilkan secara default, bagaimana saya bisa mengklik jendela pop-up sebelum dan sesudah?
// Klik untuk menampilkan jendela pop-up $ ('#btn'). On ('click', function () {$ ('#mymodal'). Modal ('show');});4. Acara
Kotak modal mendukung 4 jenis waktu, sesuai dengan sebelum pop-up, setelah pop-up, sebelum ditutup dan setelah ditutup.
$('#myModal').on('show.bs.modal', function() { alert('Free immediately when the show method is called!');});$('#myModal').on('shown.bs.modal', function() { alert('Free immediately when the modal box is ditampilkan! ');}); $ ('#mymodal '). on (' hide.bs.modal ', function () {waspada (' gratis segera ketika metode hide dipanggil! ');}); $ ('#myModal '). On (' hiden.bs.modal ', function () {' warnal '). ditampilkan! ');}); $ ('#mymodal '). on (' loaded.bs.modal ', function () {alert (' gratis setelah data jarak jauh dimuat! ');});Serangkaian tutorial ini telah dikompilasi ke dalam: Tutorial Dasar Bootstrap Topik Khusus, Selamat datang untuk mengklik untuk belajar.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.