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.clientHeightthis.$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垂直居中了，效果图：

转载于:https://www.cnblogs.com/hjbky/p/7350523.html

bootstrap modal垂直居中（简单封装）相关推荐

Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js)
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) 参考文章: (1)Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) (2)https://www. ...
RabbitMQ Management HTTP API的简单封装
RabbitMQ Management HTTP API的简单封装文章目录 RabbitMQ Management HTTP API的简单封装官方相关代码展示官方相关官方文档:https:/ ...
Android APP更新下载工具类——简单封装DownloadManager
几乎所有APP都包含了检查更新功能,更新下载功能的实现方式常用的有两种:1.使用App网络框架的文件下载请求:2.使用自带的DownloadManager类:本文介绍第二种,简单封装一下Downloa ...
简单封装浏览器 cookie 工具类
版权声明:本文首发 http://asing1elife.com ,转载请注明出处. https://blog.csdn.net/asing1elife/article/details/8265571 ...
bootstrapdatetimepicker 隐藏触发 bootstrap modal隐藏事件
如果在bootstrap modal 里面使用 bootstrapdatetimepicker ,并且写一个modal的隐藏方法清空所有文本. 那么当你选择日期之后会发现modal框里所有的文本框的值 ...
小程序简单封装 request 请求
我在这里做了详细的介绍 : 小程序简单封装 request 请求转载于:https://www.cnblogs.com/biangz/p/9984340.html
简单封装 HTTP 请求
2017-2-19 更新到第二版: 源码地址:http://git.oschina.net/sp42/ajaxjs/tree/master/ajaxjs-base/src/com/ajaxjs/net ...
【JDBC】实现对JDBC 连接的简单封装
package util;import java.sql.Connection; import java.sql.DriverManager;/**** 实现对JDBC 的封装* @author mq ...
centerandzoom 无效_在bootstrap modal 中加载百度地图的信息窗口失效解决方法
这个问题其实很傻,解决方法没有任何技术含量,只是记录下工作中发生的事. 前阵子给一个汽车集团客户做了一个经销商查询系统,其中一个功能是使用地图标注经销商店面地址,并且实现导航功能. 页面演示地址:ht ...

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

bootstrap modal垂直居中（简单封装）相关推荐

最新文章

热门文章