Rumah >hujung hadapan web >tutorial js >Penggunaan mudah kemahiran dialog_javascript modal Bootstrap

Penggunaan mudah kemahiran dialog_javascript modal Bootstrap

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

Modal ialah subborang yang meliputi borang induk. Biasanya, tujuannya adalah untuk memaparkan kandungan daripada sumber berasingan yang boleh mempunyai beberapa interaksi tanpa meninggalkan borang induk. Subborang menyediakan maklumat, interaksi dan banyak lagi.

Jika anda ingin merujuk kefungsian pemalam ini secara berasingan, maka anda perlu merujuk modal.js. Sebagai alternatif, seperti yang dinyatakan dalam bab gambaran keseluruhan pemalam Bootstrap, anda boleh merujuk bootstrap.js atau versi mini bootstrap.min.js.
1. Penggunaan
Anda boleh menukar kandungan tersembunyi pemalam modal:
Melalui atribut data: Tetapkan atribut data-toggle="modal" pada elemen pengawal (seperti butang atau pautan), dan tetapkan data-target="#identifier" atau href="#identifier" untuk menentukan mod tertentu untuk ditukar kotak status (dengan id="pengenal").
Melalui JavaScript: Menggunakan teknik ini, anda boleh memanggil modal dengan id="identifier" dengan baris JavaScript yang ringkas:
$('#pengecam').modal(pilihan)
2. Contoh 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:

Salin kod Kod adalah seperti berikut:
3e4f46f019cd35c411b5d02af579db6bContract Add5db79b134e9f6b82c0b36e0489ee08ed

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

Salin kod Kod adalah seperti berikut:
$('#modal1').modal('hide ');
$("#modal1").on("hidden", function() {$('#form1')[0].reset();}); //Selepas menambah kontrak, kosongkan operasi borang

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

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