bootstrap modal垂直居中（簡單封裝）

時間 2019-11-24

標籤 bootstrap modal 垂直居中簡單封裝欄目 Bootstarp 简体版

原文原文鏈接

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

未封裝前：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>

<button type="button" id="modalBtn" class="btn btn-primary">點擊彈出modal</button>

<div class="modal fade" id="myModal">
    <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">Modal 標題</h4>
            </div>
            <div class="modal-body">
                <p>內容&hellip;</p>
                <p>內容&hellip;</p>
                <p>內容&hellip;</p>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">肯定</button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function(){
        var $m_btn = $('#modalBtn');
        var $modal = $('#myModal');
        $m_btn.on('click', function(){
            $modal.modal({backdrop: 'static'});
        });

        $modal.on('show.bs.modal', function(){
            var $this = $(this);
            var $modal_dialog = $this.find('.modal-dialog');
            // 關鍵代碼，如沒將modal設置爲 block，則$modala_dialog.height() 爲零
            $this.css('display', 'block');
            $modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });
        });

    });
</script>

</body>
</html>

封裝後：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>

<button type="button" id="modalBtn" class="btn btn-primary">點擊彈出modal</button>

<div class="modal fade" id="myModal">
    <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">Modal 標題</h4>
            </div>
            <div class="modal-body">
                <p>內容&hellip;</p>
                <p>內容&hellip;</p>
                <p>內容&hellip;</p>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">肯定</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function(){
        $('#myModal').myfunction({
            $m_btn:$('#modalBtn'),  //觸發事件元素
            $modal:$('#myModal'),   //響應事件元素
            eventType:'click'     //事件類型
        });
    });
    ;(function ($) {
        $.fn.myfunction=function (options) {
            var defaults={
                $m_btn : $('#modalBtn'),
                $modal : $('#myModal'),
                eventType:'click'
            };
            var setting=$.extend({},defaults,options);
            this.each(function(){
                var my_btn = setting.$m_btn;
                var _modal = setting.$modal;
                var _event = setting.eventType;
                my_btn.on(_event, function(){
                    _modal.modal({backdrop: 'static'});
                });

                _modal.on('show.bs.modal', function(){
                    var $this = $(this);
                    var $modal_dialog = $this.find('.modal-dialog');
                    $this.css('display', 'block');
                    $modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });
                });
            });
        }
    })(jQuery);
</script>

</body>
</html>

2.修改bootstrap.js 源碼；java

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

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

加上少許代碼：this

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 = ( $(window).height() - $modal_dialog.height() )/2;
    $modal_dialog.css({'margin': m_top + 'px auto'});
  }

而後就實現modal垂直居中了，效果圖：spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。