Analisis menyeluruh tentang kaedah pelaksanaan kemahiran bootstrap window_javascript pop-up

1. Analisis struktur

Kotak pop timbul modal dalam rangka kerja Bootstrap masing-masing menggunakan gaya "modal", "modal-dialog" dan "modal-content", dan kandungan sebenar tetingkap timbul diletakkan dalam "modal-content ". Utamanya Ia juga merangkumi tiga bahagian:

　☑ Pengepala kotak timbul, biasanya diwakili oleh "pengepala modal", terutamanya termasuk tajuk dan butang tutup

　☑ Badan kotak pop timbul, biasanya diwakili oleh "modal-body", kandungan utama kotak pop timbul

　☑ Kaki kotak pop timbul, biasanya diwakili oleh "modal-footer", terutamanya meletakkan butang operasi

<div class="modal" id="mymodal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

2. Kelas togol data mencetuskan tetingkap timbul (tidak perlu menulis JS)

1. Pengisytiharan tetingkap pop timbul modal , hanya perlu menyesuaikan dua atribut yang diperlukan: togol data dan sasaran data.

<!-- data-target触发模态弹出窗元素 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div>
 </div>
</div>

2. Perihalan parameter data

Selain mengawal tetingkap pop timbul modal melalui togol data dan sasaran data, rangka kerja Bootstrap juga menyediakan atribut data tersuai lain untuk kotak pop timbul modal untuk mengawal tetingkap pop timbul modal.

3. Tetingkap timbul pencetus JS (JS perlu ditulis)

　1. Selain menggunakan atribut tersuai untuk mencetuskan kotak pop timbul modal, anda juga boleh mencetuskan tetingkap pop timbul modal melalui kaedah JavaScript. Dicetuskan dengan memberikan acara kepada elemen. Sebagai contoh, berikan butang acara klik, dan kemudian cetuskan tetingkap pop timbul modal.

HTML:

点击我
<div class="modal" id="mymodal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JS:

 $(function(){
 $(".btn").click(function(){
 $("#mymodal").modal("toggle");
 });
 });

2 Apabila menggunakan JavaScript untuk mencetuskan tetingkap pop timbul modal, rangka kerja Bootstrap menyediakan beberapa tetapan, terutamanya termasuk

Tetapan harta:

$(function(){
 $(".btn").click(function(){
 $("#mymodal").modal({
  keyboard:false
 });
 });
});

Tetapan parameter:

Tetapan acara:

$('#myModal').on('hidden.bs.modal', function (e) {
 // 处理代码...
})

4. Saiz tetingkap timbul

Rangka kerja Bootstrap juga menyediakan saiz yang berbeza untuk pop timbul modal.

Salah satunya ialah gaya saiz besar "modal-lg".

<divclass="modal-dialog modal-lg">
 <divclass="modal-content"> ... </div>
</div>

Yang lain ialah gaya saiz kecil "modal-sm".

<divclass="modal-dialog modal-sm">
 <divclass="modal-content"> ... </div>
</div>

Di atas adalah pengenalan lengkap kepada kaedah pelaksanaan tetingkap timbul Bootstrap Saya harap ia akan membantu pembelajaran semua orang.