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

BootStrap的兩種模態(tài)框方式

 更新時(shí)間：2017年05月10日 09:13:10   作者：米米余  
bootstrap彈出層有多種觸發(fā)方式，以下是我用到的bootstrap的兩種模態(tài)框方式，需要的的朋友參考下吧

bootstrap的彈出層

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">彈出層標(biāo)題</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，當(dāng)$m_btn被點(diǎn)擊后$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">彈出層標(biāo)題</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，通過這兩個(gè)id進(jìn)行綁定
    $m_btn.on('click', function(){
      $modal.modal({backdrop: 'static'});
    });
  });
 </script>

結(jié)果：

這里寫圖片描述

3.方法三：點(diǎn)擊表格一行，彈出彈出層

動(dòng)態(tài)給tr標(biāo)簽加彈出的觸發(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">彈出層標(biāo)題</h4>
      </div>
      <div class="modal-body">
        <p>點(diǎn)擊表格一行內(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的彈出層在整個(gè)屏幕的上半部分，可以將它居中顯示。（方法二可以讓彈出層居中顯示）

$(function(){
    // dom加載完畢
    var $m_btn = $('#y-modalBtnAdd');  y-modalBtnAdd是button的id
    var $modal = $('#y-myModalAdd');  y-myModalAdd是彈出的遮罩層的id，通過這兩個(gè)id進(jìn)行綁定 
    // 測(cè)試 bootstrap 居中  ，bootstrap的彈出層默認(rèn)是左右居中，上下則是偏上，此代碼將彈出層上下也居中了，但是會(huì)抖
            動(dòng)一下
    $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>

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

相關(guān)文章

最新評(píng)論