Sebelumnya, kami menjelaskan penggunaan tab Bootstrap. Hari ini kita akan belajar tentang penggunaan jendela pop-up model di Bootstrap.
Memengaruhi:
Kode:
<input id = "btntext" type = "tombol" value = "tambahkan komponen teks" data-koggle = "modal" data-target = "#mymodal" href = "../ sysmanage/zujianManage.aspx"/> <!-modal-> <v ID = "mymodal" Tabindex = "--1" Role "TOLED" <"DialoG" <DialoG = "MyModal" Tabindex = "--1" Role "Role" "" "" "TOLED" TOLPED "TOLPED" TOLPED "TOLPED" TOLED "-1" TOLED "--1" TOLED "TOLED" TOPLEX = "--1" Data-Dismiss = "Modal"> × </button> <h3 id = "mymodallabel"> header modal </h3> </div> <viv> </div>
Sangat sederhana, itu saja.
Catatan: Properti target data menunjuk ke ID model, jadi klik tombol dan model akan muncul.
Tentu saja Anda juga dapat menggunakan JS untuk mengendalikannya.
Kode berikut:
Tampilkan: $ ('#myModal'). Modal ('show');
Sembunyikan: $ ('#myModal'). Modal ('hide');
Sakelar: $ ('#myModal'). Modal ('TOOGLE');
Acara: $ ('#myModal'). On ('hidden', function () {// lakukan sesuatu ...});
CATATAN: Saya menggunakan atribut HREF di sini, yaitu untuk membiarkan model jauh dari URL. Tentu saja, Anda dapat menulis apa yang Anda inginkan langsung ke model-tubuh.
Jika Anda melihat struktur Model Div dengan hati-hati, Anda akan memahami bahwa model-tubuh mewakili konten dan header model adalah header. Jadi, jika Anda ingin menambahkan dua tombol di bagian bawah, Anda harus menggunakan kode berikut.
<div> <a href = "#"> tutup </a> <a href = "#"> simpan </a> </div>
Catatan: Jika Anda ingin mengatur lebar model, Anda harus menambahkan tata letak. Ini untuk menempatkan model di blok kode di bawah ini dan mengatur lebar model. style = "Width: 500px". Ngomong -ngomong, Anda tidak bisa begitu saja memasukkannya ke kelas menggunakan gaya span. .
<div> </div>
Di atas adalah penggunaan kotak pop-up model bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu semua orang!