bootstrap modal垂直居中（简单封装）

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垂直居中（简单封装）的更多相关文章

对bootstrap modal的简单扩展封装
对bootstrap modal的简单扩展封装参考自:http://www.muzilei.com/archives/677 注:原文不支持bootstrap新版本,并且居中等存在问题此段时间 ...
Bootstrap modal垂直居中
Bootstrap modal垂直居中在网上看到有Bootstrap2的Modal dialog垂直居中问题解决方法,这种方法自己试了一下,并不能完全居中,并且窗口的大小不一样的话,每次显示的m ...
bootstrap modal 垂直居中对齐
bootstrap modal 垂直居中对齐文章参考 http://www.bubuko.com/infodetail-666582.html http://v3.bootcss.com/Jav ...
Bootstrap Modal 垂直居中
Bootstrap 的 modal 正文中如果内容较少的话,并不会垂直居中,而是偏上, 如果想要达到垂直居中的效果,需要自动动手了. 可以在初始显示时设置垂直居中,可以这样做: $('#YourMod ...
bootstrap modal垂直居中（转）
根据博友的经验,总结后请使用方法一就行了一,修改bootstrap.js 源码原来的: Modal.prototype.adjustDialog = function () { ].scrollH ...
Bootstrap模态框(modal)垂直居中
http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...
Bootstrap(v3.2.0)模态框(modal)垂直居中
Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...
bootstrap Modal 模态框垂直居中
解决 Modal 垂直居中的问题,上网找了好多博客,有好多说改源码的,这个并没有实践. 但发现另一种解决办法,可以实现,代码如下: function centerModals(){ $('.modal ...
bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

随机推荐

MySQL高级知识（八）——ORDER BY优化
前言:在使用order by时,经常出现Using filesort,因此对于此类sql语句需尽力优化,使其尽量使用Using index. 0.准备 #1.创建test表. drop table i ...
【BZOJ2117】 [2010国家集训队]Crash的旅游计划
[BZOJ2117] [2010国家集训队]Crash的旅游计划 Description 眼看着假期就要到了,Crash由于长期切题而感到无聊了,因此他决定利用这个假期和好友陶陶一起出去旅游. Cra ...
2883 -- 【TJOI2018】游园会
Description 小豆参加了$NOI$的游园会,会场上每完成一个项目就会获得一个奖章,奖章只会是$N,O,I$的字样.在会场.上他收集到了$K$个奖章组成的串.兑奖规则是奖章串和兑奖 ...
w3m 在ubuntu中的使用
w3m 使用总结安装 sudo apt install w3m终端 w3m www.baidu.com 即可打开w3m是个开放源代码的命令行下面的网页浏览器.一般的linux系统都会自带这个工具,可 ...
move或rebuild lob分区对象
当使用如下语法移动或重建一个lob分区对象,将报错: SQL> alter table SHOW_LOB_STORAGE move lob(DDD) store as (tablespace P ...
Linux中的cat、more、less、head、tail命令
cat [OPTION]... [FILE]... -E:显示行结束符$ -n:对显示出的每一行进行编号 cat后面可以加多个文件,也就是说可以把多个文件连接起来,然后dump到标准输出. 另外cat ...
5、原生jdbc链接数据库实例-自动取款机
ATM自动取款机需求一．登陆 1.界面要求:服务选择 1.老用户登陆:进入后输入卡号密码登陆 2.新用户开户:开户需要输入身份证号,记录姓名,开户时间.然后机器给出卡号,原始密码:111111. 卡 ...
OpenCV3计算机视觉Python语言实现笔记（五）
图像的几何变换主要包括:平移.扩大与缩小.旋转.仿射.透视等等.图像变换是建立在矩阵运算基础上的,通过矩阵运算可以很快的找到对应关系. 1. 图像的平移图像的平移,沿着x方向tx距离,y方向ty距离 ...
C# — Socket通信实现
昨天晚上在网上查找资料,简单实现了C#开发的Socket通信,以下是具体的开发流程,我使用的是VS2017进行开发的: 一.服务器端: 1.新建一个项目,Windows控制台程序 2.重命名cs文件 ...
docker+openvswitch实现主机与容器的网络通信
主要用到openvswitch和netns网络名称空间的相关知识还有ip命令的使用. 实验环境的结构图如下: 思路如下: 安装openvswitch ovs创建br0,br1,并启动两个不加载网络的d ...

bootstrap modal垂直居中（简单封装）

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

随机推荐

热门专题