BootStrap3.X模態框垂直居中顯示

點擊按鈕時modal的位置看起來很不舒服，解決辦法總結有兩：

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

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

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

$(function(){

// dom加載完畢

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

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

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

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

});

// 測試 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>

該實現方式彈出框是居中了，但彈出時有一些遲疑后抖動到中部；不是特別理想，接下來試試第二種方式；

2.修改bootstrap.js 源碼；

帶著問題讀js庫源碼，往往能學到不少知識；本著怎樣讓 modal組件自動居中目的，開始跟蹤組件彈窗時對應的事件；

打開bootstrap.js ctrl+f 找到 modal對應代碼：

彈出框出現時，調用的自然是 Modal.prototype.show() 方法，而show 方法中又調用了 that.adjustDialog() 方法：

以上代碼看來，官方要實現垂直居中簡直太容易，而他們沒有，只能說國外同行網站布局觀跟俺們還是有區別的。加上少量代碼：

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'});

}

然后就實現modal垂直居中了，效果圖：

ootstrap中modal模態框實現在頁面中水平垂直居中的方法

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

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

#myModal{

left: 50%;

top: 50%;

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

}

經過重新定義后會發現在移動端模態框的寬度太小了，我們還可以繼續優化一下，設置一個最小寬度，最終代碼如下：

#myModal{

left: 50%;

top: 50%;

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

min-width:80%;/*這個比例可以自己按需調節*/

}

其他需要的樣式可以繼續自由發揮。

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

<!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.標題
                  bootstrap對h1-h6的標題效果進行覆蓋
                  提供了對應的類名，為非標題元素設置樣式
                  .h1~.h6
                  副標題 small標簽 或 .small類名
                2.段落
                  通過.lead 來突出強調內容(其作用就是增大
                  文本字號，加粗文本，而且對行高和margin
                  也做了相應處理)
                3.強調
                  .text-muted: 提示，使用淺灰色(#999)
                  .text-primary: 主要，使用藍色(#428bca)
                  .text-success: 成功，使用淺綠色(#3c763d)
                  .text-info: 通知信息，使用淺藍色(#31708f)
                  .text-warning: 警告，使用黃色(#8a6d3b)
                  .text-danger: 危險，使用褐色(#a94442)
                4.對齊效果
                  Bootstrap通過定義四個類名來控制文本的對齊風格
                    .text-left: 左對齊
                    .text-center: 居中對齊
                    .text-right: 右對齊
                    .text-justify: 兩端對齊
        -->
        <!--標題-->
        <h1>標題1 <small>副標題</small></h1>
        <h2>標題2 <span class="small">副標題2</span></h2>
        <h3>標題3</h3>

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

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

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

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

在線咨詢

上一篇：vue基礎之使用get、post、jsonp實現交互
下一篇：沒等到下雪，用ps自己下一場冬雪

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

BootStrap3.X模態框垂直居中顯示

ootstrap中modal模態框實現在頁面中水平垂直居中的方法

您的項目需求