bootstrap modal 垂直居中對齊

bootstrap modal 垂直居中對齊

 

文章參考

http://www.bubuko.com/infodetail-666582.html

http://v3.bootcss.com/JavaScript/#modals

 

<div class="modal fade" id="sqh_model">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">蔬菜預定</h4>
            </div>
            <div class="modal-body">
                <p>盡請期待</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">肯定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


function showTips(){
    $('#sqh_model').modal('show')
}

 

 

默認是距離頂部30px,左右居中

如圖所示

 

解決辦法一：覆蓋以前的CSS樣式

/**********對bootstrap的modal樣式進行重寫**********/
.modal-dialog {
    margin: 200px auto;
}

 

 

解決辦法二：調用回調函數

 

function showTips(){
        //{"backdrop":"static"}點擊背景不會消失
        $('#sqh_model').modal({"backdrop":"static"}).modal('show').on("shown.bs.modal",function(){
            // 是彈出框居中。。。
            var $modal_dialog = $(this.$element[0]).find('.modal-dialog');
            //獲取可視窗口的高度
            var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
            //獲得dialog的高度
            var dialogHeight = $modal_dialog.height();
            //計算出距離頂部的高度
            var m_top = (clientHeight - dialogHeight)/2;
            console.log("clientHeight : " + clientHeight);
            console.log("dialogHeight : " + dialogHeight);
            console.log("m_top : " + m_top);
            $modal_dialog.css({'margin': m_top + 'px auto'});
        });
    }

 

解決辦法三：修改源代碼

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 clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
    //獲得dialog的高度
    var dialogHeight = $modal_dialog.height();
    //計算出距離頂部的高度
    var m_top = (clientHeight - dialogHeight)/2;
    console.log("clientHeight : " + clientHeight);
    console.log("dialogHeight : " + dialogHeight);
    console.log("m_top : " + m_top);
    $modal_dialog.css({'margin': m_top + 'px auto'});
}

 

 

參數

能夠將選項經過 data 屬性或 javascript 代碼傳遞。對於 data 屬性，須要將參數名稱放到 data- 以後，例如 data-backdrop=""。

名稱 類型 默認值 描述

backdrop	boolean 或 字符串'static'	true	Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard	boolean	true	鍵盤上的 esc 鍵被按下時關閉模態框。
show	boolean	true	模態框初始化以後就當即顯示出來。
remote	path	false	This option is deprecated since v3.3.0 and will be removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.loadyourself. 若是提供的是 URL，將利用 jQuery 的 load 方法今後 URL 地址加載要展現的內容（只加載一次）並 插入 .modal-content 內。若是使用的是 data 屬性 API， 還能夠利用 href 屬性指定內容來源地址。下面是一個實例： 複製 <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

方法

.modal(options)

將頁面中的某塊內容做爲模態框激活。接受可選參數 object。

複製

$('#myModal').modal({ keyboard: false })

.modal('toggle')

手動打開或關閉模態框。在模態框顯示或隱藏以前返回到主調函數中（也就是，在觸發 shown.bs.modal 或hidden.bs.modal 事件以前）。

複製

$('#myModal').modal('toggle')

.modal('show')

手動打開模態框。在模態框顯示以前返回到主調函數中 （也就是，在觸發 shown.bs.modal 事件以前）。

複製

$('#myModal').modal('show')

.modal('hide')

手動隱藏模態框。在模態框隱藏以前返回到主調函數中 （也就是，在觸發 hidden.bs.modal 事件以前）。

複製

$('#myModal').modal('hide')

.modal('handleUpdate')

Readjusts the modal's positioning to counter a scrollbar in case one should appear, which would make the modal jump to the left.

Only needed when the height of the modal changes while it is open.

複製

$('#myModal').modal('handleUpdate')

事件

Bootstrap 的模態框類提供了一些事件用於監聽並執行你本身的代碼。

All modal events are fired at the modal itself (i.e. at the <div class="modal">).

事件類型 描述

show.bs.modal	show 方法調用以後當即觸發該事件。若是是經過點擊某個做爲觸發器 的元素，則此元素能夠經過事件的relatedTarget 屬性進行訪問。
shown.bs.modal	此事件在模態框已經顯示出來（而且同時在 CSS 過渡效果完成）以後被觸發。 若是是經過點擊某個做爲觸發器的元素，則此元素能夠通 過事件的 relatedTarget 屬性進行訪問。
hide.bs.modal	hide 方法調用以後當即觸發該事件。
hidden.bs.modal	此事件在模態框被隱藏（而且同時在 CSS 過渡效果完成）以後被觸發。
loaded.bs.modal	從遠端的數據源加載完數據以後觸發該事件。

 

$('#myModal').on('hidden.bs.modal', function (e) { // do something... })