欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap3 模態(tài)框使用實(shí)例

 更新時(shí)間：2017年02月22日 11:46:07   作者：qq1214379009  
這篇文章主要介紹了Bootstrap3 模態(tài)框的使用實(shí)例,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

不支持同時(shí)打開多個(gè)模態(tài)框

務(wù)必盡量將HTML代碼放置在模態(tài)框的body位置以避免其他組件影響模態(tài)框

*autofocus 對(duì)于模態(tài)框無效, 需要自己調(diào)用 $('#myModal').on('shown.bs.modal', function () {
 $('#myInput').focus()
})*

實(shí)例

靜態(tài)

<div class="modal fade" tabindex="-1" role="dialog">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
  <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</button>
  </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

動(dòng)態(tài)

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
  ...
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</button>
  </div>
 </div>
 </div>
</div>

可選尺寸

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
 <div class="modal-dialog modal-lg" role="document">
 <div class="modal-content">
  ...
 </div>
 </div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
 <div class="modal-dialog modal-sm" role="document">
 <div class="modal-content">
  ...
 </div>
 </div>
</div>

禁用fade

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
 ...
</div>

使用柵格系統(tǒng)

僅需在body中使用 .rows

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
  <div class="row">
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  </div>
  <div class="row">
   <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
   <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
  </div>
  <div class="row">
   <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  </div>
  <div class="row">
   <div class="col-sm-9">
   Level 1: .col-sm-9
   <div class="row">
    <div class="col-xs-8 col-sm-6">
    Level 2: .col-xs-8 .col-sm-6
    </div>
    <div class="col-xs-4 col-sm-6">
    Level 2: .col-xs-4 .col-sm-6
    </div>
   </div>
   </div>
  </div>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</button>
  </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

使用方法

通過data屬性

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

通過JavaScript調(diào)用

$('#myModal').modal(options)

參數(shù)

名稱 類型 默認(rèn)值 描述
backdrop boolean 或 字符串 ‘static' true 設(shè)置為 static 時(shí), 在點(diǎn)擊屏幕時(shí)不會(huì)關(guān)閉
keyboard boolean true 鍵盤上的 esc 鍵被按下時(shí)關(guān)閉模態(tài)框
show boolean true 模態(tài)框初始化之后就立即顯示出來

方法

模態(tài)框激活

.modal(options)
$('#myModal').modal({
 keyboard: false
})

模態(tài)框觸發(fā)手動(dòng)打開或者關(guān)閉

觸發(fā)在 shown.bs.modal 以及 hidden.bs.modal 事件之前

.modal('toggle')

手動(dòng)打開模態(tài)框

觸發(fā)在 shown.bs.modal 之前

$('#myModal').modal('show')

手動(dòng)隱藏模態(tài)框

觸發(fā)在 hidden.bs.modal 之前

$('#myModal').modal('hide')

事件

按照時(shí)間先后順序分別為 show.bs.modal shown.bs.modal hide.bs.modal  hidden.bs.modal

調(diào)用方式

$('#myModal').on('hidden.bs.modal', function (e) {
 // do something...
})

以上所述是小編給大家介紹的Bootstrap3 模態(tài)框使用實(shí)例，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論