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

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

WBOY
Lepaskan: 2016-05-16 15:03:01
asal
1409 orang telah melayarinya

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> 
Salin selepas log masuk

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> 
Salin selepas log masuk

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();}); //添加合同后,清空表单操作
Salin selepas log masuk

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.

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan