快捷導(dǎo)航

bootstrap彈出層的多種觸發(fā)方式

更新時間：2017年05月10日 08:45:38 作者：米米余

這篇文章主要為大家詳細介紹了bootstrap彈出層的多種觸發(fā)方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下

bootstrap彈出層有多種觸發(fā)方式，以下是我用到的幾種方式：

1.方法一：button中屬性觸發(fā)

注意：button中的data-target內(nèi)容應(yīng)該和要和彈出層中的id保持一致
data-target=”#mymodal-data”——– id=”mymodal-data”

<!--在button上綁定觸發(fā)彈出層的屬性-->
 <button class="btn btn-primary delete" data-toggle="modal"
  data-target="#mymodal-data" data-whatever="@mdo">
  修改
</button>

<!-- 模態(tài)彈出窗內(nèi)容 -->
<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>彈出層主體內(nèi)容</p>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
  <button type="button" class="btn btn-primary">保存</button>
  </div>
 </div>
 </div>
</div>

結(jié)果：

這里寫圖片描述

2.方法二：通過js綁定

注意：將button的id和彈出層的id分別賦給 $m_btn和$modal，當$m_btn被點擊后$modal彈出。

<button class="btn btn-info" type="button" id="y-modalBtnAdd" > <label >添加</label></button>


<!-- 模態(tài)彈出窗內(nèi)容 -->
<div class="modal" id="y-myModalAdd" 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>通過js綁定button和彈出層觸發(fā)</p>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
  <button type="button" class="btn btn-primary">保存</button>
  </div>
 </div>
 </div>
</div>
<!--js代碼-->
<script type="text/javascript">
 $(function(){
 // dom加載完畢
 var $m_btn = $('#y-modalBtnAdd'); //y-modalBtnAdd是button的id
 var $modal = $('#y-myModalAdd'); //y-myModalAdd是彈出的遮罩層的id，通過這兩個id進行綁定
 $m_btn.on('click', function(){
  $modal.modal({backdrop: 'static'});
 });
 });
 </script>

結(jié)果：

這里寫圖片描述

3.方法三：點擊表格一行，彈出彈出層

動態(tài)給tr標簽加彈出的觸發(fā)屬性

<!--表格-->
<table class="table table-bordered " style="width: 400px">
 <thead>
 <tr>
  <th>一</th>
  <th>二</th>
  <th>三</th>
 </tr>
 </thead>
 <tbody class="tableBody">
 <tr>
  <td>one</td>
  <td>two</td>
  <td>three</td>
 </tr>
 <tr>
  <td>four</td>
  <td>five</td>
  <td>six</td>
 </tr>
 </tbody>
</table>

<!-- 模態(tài)彈出窗內(nèi)容 -->
<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>點擊表格一行內(nèi)容，彈出彈出層</p>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
  <button type="button" class="btn btn-primary">保存</button>
  </div>
 </div>
 </div>
</div>


<!--js代碼-->
<script type="text/javascript">
 $(function () {
 $(".tableBody>tr").each(function () {
  $(this).on("click",function () {
  $(this).attr({"data-toggle":"modal","data-target":"#mymodal-data","data-whatever":"@mdo"});

  })
 });
 });
</script>

結(jié)果：

這里寫圖片描述

bootstrap的彈出層在整個屏幕的上半部分，可以將它居中顯示。（方法二可以讓彈出層居中顯示）

$(function(){
 // dom加載完畢
 var $m_btn = $('#y-modalBtnAdd'); y-modalBtnAdd是button的id
 var $modal = $('#y-myModalAdd'); y-myModalAdd是彈出的遮罩層的id，通過這兩個id進行綁定 
 // 測試 bootstrap 居中 ，bootstrap的彈出層默認是左右居中，上下則是偏上，此代碼將彈出層上下也居中了，但是會抖
   動一下
 $modal.on('shown.bs.modal', function(){
  var $this = $(this);
  var $modal_dialog = $this.find('.modal-dialog');
  var m_top = ( $(document).height() - $modal_dialog.height() )/2;
  $modal_dialog.css({'margin': m_top + 'px auto'});
 });
 });
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: