Pengenalan kepada penggunaan kemahiran kotak timbul model BootStrap_javascript

Sebelum ini, kami telah menerangkan penggunaan tab bootstrap Hari ini kita akan belajar tentang penggunaan tetingkap pop timbul dalam bootstrap.

Kesan:

Kod:

<input id="btntext" type="button" value="添加文本组件" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx"/>
<!-- Modal -->
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body"></div>
</div>

Ia sangat mudah, itu sahaja.

Nota: Atribut sasaran data menghala ke id model, jadi klik butang dan model akan muncul.

Sudah tentu anda juga boleh menggunakan js untuk mengawalnya.

Kod berikut:

Tunjukkan: $('#myModal').modal('show');

Sembunyikan: $('#Modal saya').modal('sembunyikan');

Tukar: $('#myModal').modal('toogle');

Acara: $('#myModal').on('hidden', function () {// do something...});

Nota: Saya menggunakan atribut href di sini untuk membiarkan model pergi ke url jauh. Sudah tentu, anda boleh menulis kandungan yang anda inginkan terus dalam badan model.

Perhatikan dengan teliti pada struktur div model, dan anda akan faham bahawa badan model mewakili kandungan, dan pengepala model mewakili pengepala Jika anda ingin menambah dua butang di bahagian bawah, anda perlu menggunakan perkara berikut kod.

<div class="modal-footer">
<a href="#" class="btn">关闭</a>
<a href="#" class="btn btn-primary">保存</a>
</div>

Nota: Jika anda ingin menetapkan lebar model, anda mesti menambah reka letak. Hanya letakkan model dalam blok kod di bawah dan tetapkan lebar model. style="width:500px". Dengan cara ini, anda tidak boleh menggunakan gaya span dan meletakkannya terus ke dalam kelas. .

<div class="container"></div>

Di atas adalah penggunaan kotak pop timbul model BootStrap yang diperkenalkan oleh editor Saya harap ia akan membantu semua orang!