BootStrap3.X模態(tài)框垂直居中顯示

點(diǎn)擊按鈕時(shí)modal的位置看起來很不舒服，解決辦法總結(jié)有兩：

1.使用modal 彈出事件方法；

從官方文檔中可以了解到， modal組件有不少事件接口：

其中 “shown.bs.modal”可以在彈窗框出現(xiàn)后做一些處理，更改彈出框的樣式當(dāng)然是可以的：

$(function(){

// dom加載完畢

var $m_btn=$(‘#modalBtn‘);

var $modal=$(‘#myModal‘);

$m_btn.on(‘click‘, function(){

$modal.modal({backdrop: ‘static‘});

});

// 測(cè)試 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>

該實(shí)現(xiàn)方式彈出框是居中了，但彈出時(shí)有一些遲疑后抖動(dòng)到中部；不是特別理想，接下來試試第二種方式；

2.修改bootstrap.js 源碼；

帶著問題讀js庫(kù)源碼，往往能學(xué)到不少知識(shí)；本著怎樣讓 modal組件自動(dòng)居中目的，開始跟蹤組件彈窗時(shí)對(duì)應(yīng)的事件；

打開bootstrap.js ctrl+f 找到 modal對(duì)應(yīng)代碼：

彈出框出現(xiàn)時(shí)，調(diào)用的自然是 Modal.prototype.show() 方法，而show 方法中又調(diào)用了 that.adjustDialog() 方法：

以上代碼看來，官方要實(shí)現(xiàn) 垂直居中簡(jiǎn)直太容易，而他們沒有，只能說國(guó)外同行網(wǎng)站布局觀跟俺們還是有區(qū)別的。加上少量代碼：

Modal.prototype.adjustDialog=function () {

var modalIsOverflowing=this.$element[0].scrollHeight> document.documentElement.clientHeight

this.$element.css({

paddingLeft:!this.bodyIsOverflowing&&modalIsOverflowing?this.scrollbarWidth:'',

paddingRight: this.bodyIsOverflowing &&!modalIsOverflowing?this.scrollbarWidth:''

})

// 是彈出框居中...

var $modal_dialog=$(this.$element[0]).find(' .modal-dialog' );

var m_top=( $(document).height() - $modal_dialog.height() )/2; $modal_dialog.css({'margin' : m_top + 'px auto'});

}

然后就實(shí)現(xiàn)modal垂直居中了，效果圖：

ootstrap中modal模態(tài)框?qū)崿F(xiàn)在頁(yè)面中水平垂直居中的方法

bootstrap是個(gè)前端懶人神器，樣式舒服，布局順暢，但是自帶的modal模態(tài)框默認(rèn)是水平居中，但是垂直位置偏頁(yè)面上方。如果想要實(shí)現(xiàn)水平并且垂直居中的效果，需要自己寫個(gè)css樣式重新定義一下位置。官方給的例子中模態(tài)框的默認(rèn)id是myModal，默認(rèn)帶有固定定位（position:fixed;）的樣式。

咱們只需在自己的css中重寫一下這個(gè)樣式即可:

#myModal{

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

}

經(jīng)過重新定義后會(huì)發(fā)現(xiàn)在移動(dòng)端模態(tài)框的寬度太小了，我們還可以繼續(xù)優(yōu)化一下，設(shè)置一個(gè)最小寬度，最終代碼如下：

#myModal{

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

min-width:80%;/*這個(gè)比例可以自己按需調(diào)節(jié)*/

}

其他需要的樣式可以繼續(xù)自由發(fā)揮。

【本文來自孫琪崢博客 http://www.sunqizheng.com/，想獲取更好的頁(yè)面瀏覽效果或者有任何問題請(qǐng)進(jìn)入博客，同時(shí)也可在博主評(píng)論區(qū)進(jìn)行留言，讓博主為大家答疑解惑~】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常用樣式</title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
    </head>
    <body>
        <!--
            常用樣式
                1.標(biāo)題
                  bootstrap對(duì)h1-h6的標(biāo)題效果進(jìn)行覆蓋
                  提供了對(duì)應(yīng)的類名，為非標(biāo)題元素設(shè)置樣式
                  .h1~.h6
                  副標(biāo)題 small標(biāo)簽 或 .small類名
                2.段落
                  通過.lead 來突出強(qiáng)調(diào)內(nèi)容(其作用就是增大
                  文本字號(hào)，加粗文本，而且對(duì)行高和margin
                  也做了相應(yīng)處理)
                3.強(qiáng)調(diào)
                  .text-muted: 提示，使用淺灰色(#999)
                  .text-primary: 主要，使用藍(lán)色(#428bca)
                  .text-success: 成功，使用淺綠色(#3c763d)
                  .text-info: 通知信息，使用淺藍(lán)色(#31708f)
                  .text-warning: 警告，使用黃色(#8a6d3b)
                  .text-danger: 危險(xiǎn)，使用褐色(#a94442)
                4.對(duì)齊效果
                  Bootstrap通過定義四個(gè)類名來控制文本的對(duì)齊風(fēng)格
                    .text-left: 左對(duì)齊
                    .text-center: 居中對(duì)齊
                    .text-right: 右對(duì)齊
                    .text-justify: 兩端對(duì)齊
        -->
        <!--標(biāo)題-->
        <h1>標(biāo)題1 <small>副標(biāo)題</small></h1>
        <h2>標(biāo)題2 <span class="small">副標(biāo)題2</span></h2>
        <h3>標(biāo)題3</h3>

        <div class="h1">你好，Bootstrap</div>

        <hr/>
        <!--段落-->
        <p>通過.lead 來突出強(qiáng)調(diào)內(nèi)容(其作用就是增大
            文本字號(hào)，加粗文本，而且對(duì)行高和margin
            也做了相應(yīng)處理)</p>
        <p class="lead">通過.lead 來突出<small>強(qiáng)調(diào)</small>
          <b>內(nèi)容</b>(其作用就是<strong>增大</strong>文本)
        </p>

        <hr/>
        <!--強(qiáng)調(diào)-->
        <div class="text-muted">.text-muted: 提示，使用淺灰色(#999)</div>
        <div class="text-primary">.text-primary: 主要，使用藍(lán)色(#428bca)</div>
        <div class="text-success">.text-success: 成功，使用淺綠色(#3c763d)</div>
        <div class="text-info">.text-info: 通知信息，使用淺藍(lán)色(#31708f)</div>
        <div class="text-warning">.text-warning: 警告，使用黃色(#8a6d3b)</div>
        <div class="text-danger">.text-danger: 危險(xiǎn)，使用褐色(#a94442)</div>

        <hr/>
        <!--對(duì)齊-->
        <p style="text-align:right;">Bootstrap通過定義四個(gè)類名來控制文本的對(duì)齊風(fēng)格</p>
        <p class="text-left">左對(duì)齊 - Bootstrap通過定義四個(gè)類名來控制文本的對(duì)齊風(fēng)格</p>
        <p class="text-right">右對(duì)齊 - Bootstrap通過定義四個(gè)類名來控制文本的對(duì)齊風(fēng)格</p>
        <p class="text-center">居中對(duì)齊 - Bootstrap通過定義四個(gè)類名來控制文本的對(duì)齊風(fēng)格</p>
    </body>
    
</html>

在線咨詢

上一篇：vue基礎(chǔ)之使用get、post、jsonp實(shí)現(xiàn)交互
下一篇：沒等到下雪，用ps自己下一場(chǎng)冬雪

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

BootStrap3.X模態(tài)框垂直居中顯示

ootstrap中modal模態(tài)框?qū)崿F(xiàn)在頁(yè)面中水平垂直居中的方法

您的項(xiàng)目需求