亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

bootstrap 模態(tài)框（modal）實(shí)現(xiàn)水平垂直居中顯示

 更新時(shí)間：2017年01月23日 08:30:13   作者：Altaba  
這篇文章主要為大家詳細(xì)介紹了bootstrap 模態(tài)框modal實(shí)現(xiàn)水平垂直居中顯示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

        眾所周知，bootstrap是一款非常實(shí)用的CSS框架（主要用于樣式的快速搭建），由于其簡(jiǎn)潔，美觀，快捷，響應(yīng)式等特點(diǎn)備受大家喜歡，但是其本身也是存在很多bug，當(dāng)應(yīng)對(duì)與具體的業(yè)務(wù)邏輯的時(shí)候往往達(dá)不到細(xì)節(jié)要求，比如今天我要談的bootstrap的模態(tài)框，其默認(rèn)是顯示距離頂端30px，左右居中。

       怎么讓其在垂直方向也居中呢？

       大家可能想加一個(gè)CSS樣式，讓其距離頂部距離變長(zhǎng)，實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)，當(dāng)你去試過(guò)會(huì)發(fā)現(xiàn)很多問(wèn)題，在不修改源碼的前提下修改插件并沒(méi)有自由配置的樣式一直是前端人員頭疼的事情，在此，我小做研究，提出了兩個(gè)方法：
1：

$('#youModel').on('shown.bs.modal', function (e) css('display'{ 
   var modalHeight=$(window).height() / 2 - $('#youModel .modal-dialog').height() / 2; 
   $(this).find('.modal-dialog').css({ 
    'margin-top': modalHeight 
   }); 
  });

會(huì)出現(xiàn)問(wèn)題，每次觸發(fā)事件讓模態(tài)框顯示的時(shí)候，會(huì)閃動(dòng)一下，影響體驗(yàn)，在此查閱資料在此基礎(chǔ)上提出完善的方法2
2：

$('#youModel').on('shown.bs.modal', function (e) { 
      // 關(guān)鍵代碼，如沒(méi)將modal設(shè)置為 block，則$modala_dialog.height() 為零 
      $(this).css('display', 'block'); 
      var modalHeight=$(window).height() / 2 - $('#youModel .modal-dialog').height() / 2; 
      $(this).find('.modal-dialog').css({ 
        'margin-top': modalHeight 
      }); 
    });

這樣就可以解決閃動(dòng)問(wèn)題并完美居中了。

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

相關(guān)文章

最新評(píng)論