真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

data-target=”#mymodal-data”——– id=”mymodal-data”

 
      修改



  
    
      
        
          ×
          Close
        
        彈出層標(biāo)題
      

結(jié)果：

2.方法二：通過js綁定

注意：將button的id和彈出層的id分別賦給 $m_btn和$modal，當(dāng)$m_btn被點(diǎn)擊后$modal彈出。

 添加


  
    
      
        
          ×
          Close
        
        彈出層標(biāo)題
      
      
        
通過js綁定button和彈出層觸發(fā)
      
      
        關(guān)閉
        保存
      
    
  



  $(function(){
    // dom加載完畢
    var $m_btn = $('#y-modalBtnAdd');  //y-modalBtnAdd是button的id
    var $modal = $('#y-myModalAdd');  //y-myModalAdd是彈出的遮罩層的id，通過這兩個id進(jìn)行綁定
    $m_btn.on('click', function(){
      $modal.modal({backdrop: 'static'});
    });
  });
 

結(jié)果：

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

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

  
    
      一
      二
      三
    
  
  
    
      one
      two
      three
    
    
      four
      five
      six
    
  



  
    
      
        
          ×
          Close
        
        彈出層標(biāo)題
      
      
        
點(diǎn)擊表格一行內(nèi)容，彈出彈出層
      
      
        關(guān)閉
        保存
      
    
  



  $(function () {
    $(".tableBody>tr").each(function () {
      $(this).on("click",function () {
        $(this).attr({"data-toggle":"modal","data-target":"#mymodal-data","data-whatever":"@mdo"});
      })
    });
  });

結(jié)果：

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

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

以上是“BootStrap中如何實(shí)現(xiàn)模態(tài)框”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！