Rumah  >  Artikel  >  hujung hadapan web  >  Analisis ringkas tentang penggunaan kemahiran kotak modal BootStrap (klasik)_javascript

Analisis ringkas tentang penggunaan kemahiran kotak modal BootStrap (klasik)_javascript

WBOY
WBOYasal
2016-05-16 15:03:011375semak imbas

Tinjauan ringkas tentang kotak modal BootStrap

Modal Bootstrap dibuat menggunakan pemalam Jquery tersuai. Ia boleh digunakan untuk mencipta tetingkap modal untuk memperkayakan pengalaman pengguna, atau untuk menambah fungsi praktikal kepada pengguna. Anda boleh menggunakan Popovers dan Tooltips dengan Modals.

1, Kotak dialog mod Bootstrap dan penggunaan mudah

div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>对话框标题</h3>
</div>
<div class="modal-body">
<p>对话框主体</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">取消</a>
<a href="#" class="btn btn-primary" data-dismiss="modal">确定</a>
</div>
</div> 

Dialog modal boleh dipanggil terus menggunakan butang atau pautan, berikut ialah penggunaan mudah:

<a href="#modal1" role="button" class="btn btn-primary btn-sm" data-toggle="modal">合同添加</a> 

Selain itu, apabila anda perlu mendayakan kotak dialog untuk mengosongkan data borang setiap kali ia dibuka, seperti berikut:

$('#modal1').modal('hide');
$("#modal1").on("hidden", function() {$('#form1')[0].reset();}); //添加合同后,清空表单操作

Kandungan di atas adalah penggunaan kotak modal BootStrap yang diperkenalkan oleh editor Saya harap ia akan membantu semua orang Untuk kandungan yang lebih menarik, sila perhatikan laman web Script House.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn