Analisis menyeluruh tentang kaedah pelaksanaan kemahiran bootstrap window_javascript pop-up

WBOY
Lepaskan: 2016-05-16 15:28:34
asal
1339 orang telah melayarinya

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

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

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

JS:

 $(function(){
 $(".btn").click(function(){
 $("#mymodal").modal("toggle");
 });
 });
Salin selepas log masuk

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

Tetapan parameter:

Tetapan acara:

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

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

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

<divclass="modal-dialog modal-sm">
 <divclass="modal-content"> ... </div>
</div>
Salin selepas log masuk

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

Label berkaitan:
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