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

未封装前：

<!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>

封装后：

<!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 源码；

打开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 = ( $(window).height() - $modal_dialog.height() )/2;

    $modal_dialog.css({'margin': m_top + 'px auto'});

  }

然后就实现modal垂直居中了， 效果图：

bootstrap modal垂直居中（简单封装）的更多相关文章

  1. 对bootstrap modal的简单扩展封装

    对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677   注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...

  2. Bootstrap modal垂直居中

    Bootstrap modal垂直居中   在网上看到有Bootstrap2的Modal dialog垂直居中问题解决方法,这种方法自己试了一下,并不能完全居中,并且窗口的大小不一样的话,每次显示的m ...

  3. bootstrap modal 垂直居中对齐

    bootstrap modal 垂直居中对齐   文章参考 http://www.bubuko.com/infodetail-666582.html http://v3.bootcss.com/Jav ...

  4. Bootstrap Modal 垂直居中

    Bootstrap 的 modal 正文中如果内容较少的话,并不会垂直居中,而是偏上, 如果想要达到垂直居中的效果,需要自动动手了. 可以在初始显示时设置垂直居中,可以这样做: $('#YourMod ...

  5. bootstrap modal垂直居中 （转）

    根据博友的经验,总结后请使用方法一就行了 一,修改bootstrap.js 源码 原来的: Modal.prototype.adjustDialog = function () { ].scrollH ...

  6. Bootstrap模态框(modal)垂直居中

    http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...

  7. Bootstrap(v3.2.0)模态框(modal)垂直居中

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

  8. bootstrap Modal 模态框垂直居中

    解决 Modal 垂直居中的问题,上网找了好多博客,有好多说改源码的,这个并没有实践. 但发现另一种解决办法,可以实现,代码如下: function centerModals(){ $('.modal ...

  9. bootstrap插件学习-bootstrap.modal.js

    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

随机推荐

  1. vue自定义指令用法总结及案例

    1.vue中的指令有哪些?

  2. CSAPP：第一章计算机系统漫游

    CSAPP:计算机系统漫游 关键点:上下文.程序运行.计算机系统抽象. 信息就是位+上下文一个程序的运行过程系统的硬件组成编译系统是如何工作的?一个程序的运行过程(c语言举例)计算机系统中的抽象 信息 ...

  3. [SHOI2015]自动刷题机

    嘟嘟嘟 这题就比较水了,毕竟只评了个蓝. 想一下发现满足单调性,所以可以二分找最大值. 但是最小值怎么办?刚开始我很zz的以为只要把判断条件从大于等于改成小于等于就行了,后来发现根本不对. 想了想因为 ...

  4. PHPsql

    下面员工3的薪水大于其主管的薪水,一条SQL找到薪水比下属低的主管 id username salary pid 1 a 3000 null 2 b 8000 null 3 c 5000 1 4 d ...

  5. 【vue】vue +element 搭建项目，$createElement使用

    语法: 它有三个参数 第一个:html标签名 第二个:配置的数据对象 第三个:内容 应用1:自定义弹窗 html: <el-button type="text" @click ...

  6. go第三方日志系统-seelog-Basic sections

    https://github.com/cihub/seelog 文档学习:https://github.com/cihub/seelog/wiki 1.安装: go get github.com/ci ...

  7. .NET Core中延迟单例另一种写法【.NET Core和.NET Framework的beforefieldinit差异】

    1.BeforeFieldInit是什么 前段时间在反编译代码时无意间看到在类中有一个BeforeFieldInit特性,处于好奇的心态查了查这个特性,发现这是一个关于字段初始化时间的特性[提前初始化 ...

  8. Linux kprobe调试技术使用

    kprobe调试技术是为了便于跟踪内核函数执行状态所设计的一种轻量级内核调试技术. 利用kprobe技术,可以在内核绝大多数函数中动态插入探测点,收集调试状态所需信息而基本不影响原有执行流程. kpr ...

  9. jquery append()与html()注意项

    项目中,涉及到有一部分js代码是从数据库中读取出来动态加载到一个<script>标签中的情况.使用到了jquery的append()和html()两个函数. 应用场景如下: 页面端,有一个 ...

  10. python 跨域处理方式

    因为浏览器的同源策略限制,不是同源的脚本不能操作其他源下面的资源,想操作另一个源下面的资源就属于跨域了,这里说的跨域是广义跨域,我们常说的代码中请求跨域,是狭义的跨域,即在脚本代码中向非同源域发送ht ...