首頁  >  文章  >  web前端  >  全面解析Bootstrap彈跳視窗的實作方法_javascript技巧

全面解析Bootstrap彈跳視窗的實作方法_javascript技巧

WBOY
WBOY原創
2016-05-16 15:28:341341瀏覽

一. 結構分析 

  Bootstrap框架中的模態彈出框,分別運用了“modal”、“modal-dialog”和“modal-content”樣式,而彈出窗真正的內容都放置在“modal-content”中,其主要又包括三個部分:

  ☑ 彈出框頭部,一般使用「modal-header」表示,主要包括標題和關閉按鈕

  ☑ 彈出框主體,一般使用「modal-body」表示,彈出框的主要內容

  ☑ 彈出框腳部,一般使用「modal-footer」表示,主要放置操作按鈕

<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 -->

二 . data-toggle類別觸發彈窗(無需寫JS)

1 . 模態彈出視窗聲明,只需要自訂兩個必要的屬性:data-toggle和data-target.

<!-- 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 . data-參數說明

  除了透過data-toggle和data-target來控制模態彈出視窗之外,Bootstrap框架針對模態彈出框還提供了其他自訂data-屬性,來控制模態彈出視窗。

 三 . JS觸發彈窗(要寫JS)

  1 . 除了使用自訂屬性觸發模態彈出框之外,還可以透過JavaScript方法來觸發模態彈出窗。透過給一個元素一個事件,來觸發。比如說給一個按鈕一個單擊事件,然後觸發模態彈出窗。

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 . 使用JavaScript觸發模態彈出窗時,Bootstrap框架提供了一些設置,主要包括

屬性設定:

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

參數設定:

 事件設定:

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

四 . 彈跳窗尺寸

Bootstrap框架也為模態彈出視窗提供了不同尺寸.

  一個是大尺寸樣式"modal-lg”.

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

  另一個是小尺寸樣式"modal-sm”.

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

以上就是關於Bootstrap彈跳視窗的實現方法的全部介紹,希望對大家的學習有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn