Kotak modal (modal) adalah bentuk anak yang dilapisi pada bentuk induk. Biasanya, tujuannya adalah untuk menampilkan konten dari sumber terpisah, yang dapat memiliki beberapa interaksi tanpa meninggalkan bentuk induk. Subformitas dapat memberikan informasi, interaksi, dll.
Jika Anda ingin merujuk fungsionalitas plugin secara terpisah, maka Anda perlu referensi modal.js. Atau, sebagaimana disebutkan dalam bab ikhtisar plugin Bootstrap, Anda dapat merujuk ke bootstrap.js atau versi terkompresi bootstrap.min.js.
1. Penggunaan
Anda dapat beralih konten tersembunyi dari plugin Modal Box (Modal):
Melalui Atribut Data: Atur atribut data-koggle = "modal" pada elemen pengontrol (seperti tombol atau tautan), dan atur data-target = "#identifikasi" atau href = "#identifikasi" untuk menentukan kotak modal spesifik untuk beralih (dengan id = "identifikasi").
Dengan JavaScript: Menggunakan teknik ini, Anda dapat memanggil kotak modal dengan ID = "Identifier" melalui garis sederhana JavaScript:
$ ('#Identifier'). Modal (opsi)
2. Contoh sederhana
div id = "mymodal"> <von> <tombol type = "tombol" data-dismiss = "modal"> x </button> <h3> judul kotak dial </h3> </div> <v> <p> body kotak dial </p> </div> <div> <a href = "#" data-DISMISS = "MODAL"> BATCAN </a> </a> <a href = "#" Data-DISMISS = "MODAL"> CATBUR </a> </a> <a href = "#" Data-DISMISS = "MODAL"> CANT </a> </a> <a href = "#"#"#" Data-Dismiss = "Modal"> Konfirmasi </a> </div> </div>
Dialog modal dapat dipanggil langsung menggunakan tombol atau tautan, dan ini adalah penggunaan sederhana:
Salin kode sebagai berikut: <a href = "#modal1" role = "Tombol" data-koggle = "modal"> Tambah Kontrak </a>
Selain itu, ketika Anda perlu membuat kotak dialog menghapus data formulir setiap kali dibuka, sebagai berikut:
Salinan kode adalah sebagai berikut: $ ('#modal1'). Modal ('hide');
$ ("#modal1"). on ("hidden", function () {$ ('#form1') [0] .reset ();}); // Setelah menambahkan kontrak, hapus operasi formulir
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.