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. dicom学习文章

    https://blog.csdn.net/column/details/dicom.html https://blog.csdn.net/zssureqh/article/details/49231 ...

  2. windows下简单的缓冲区溢出

    缓冲区溢出是什么? 当缓冲区边界限制不严格时,由于变量传入畸形数据或程序运行错误,导致缓冲区被“撑爆”,从而覆盖了相邻内存区域的数据 成功修改内存数据,可造成进程劫持,执行恶意代码,获取服务器控制权等 ...

  3. Python框架学习之Flask中的Jinja2模板

    前面也提到过在Flask中最核心的两个组件是Werkzeug和Jinja2模板.其中Werkzeug在前一节已经详细说明了.现在这一节主要是来谈谈Jinja2模板. 一.为什么需要引入模板: 在进行软 ...

  4. 数据泵expdp 在rac环境下 paralle 的处理方法

    其实这个是个很常见的问题,写下来做纪念吧.说明:而在11GR2后EXPDP 和 IMDP的WORKER进程在设置parallel参数时会在多个INSTANCE启动,所以DIRECTORY必须在共享磁盘 ...

  5. node.js如何引用其它js文件

    以Java来说,比如要实现第三方存储,我可能需要导入对应的库,以maven为例,使用腾讯云或者七牛云.阿里云,我需要导入对应的maven依赖.再比如,有些时候我们封装某个类,而那个类不在该包下,我们需 ...

  6. Charles 抓包工具绿化过程记录

    1.下载官方的软件,并安装. 下载地址:https://www.charlesproxy.com/latest-release/download.do 根据需求下载即可 2.使用在线破解工具生成jar ...

  7. [MicroPython]TPYBoard智能小车“飞奔的TPYBoard装甲一号”

    智能小车作为现代的新发明,是以后的发展方向,他可以按照预先设定的模式在一个环境里自动的运作,不需要人为的管理,可应用于科学勘探等等的用途.智能小车能够实时显示时间.速度.里程,具有自动寻迹.寻光.避障 ...

  8. odoo常用widget

      widget=”statusbar” 头部状态条标签widget=”email” 电子邮件地址标签widget=”selection” 下拉选择标签widget=”mail_followers” ...

  9. mysqlfrm

    mysqlfrm可基于frm文件生成对应的表结构.常用于数据恢复场景. 其有两种操作模式. 1. 创建一个临时实例来解析frm文件. 2. 使用诊断模式解析frm文件. 以下表进行测试,看看, 1.  ...

  10. webpack 中版本兼容性问题错误总结

    一定不要运行npm i  XXX  -g(-d) 一定要指定版本,尽量低版本,也不最新版本,会导致不兼容和指令不一样的问题. 1.安装webpack-dev-server 报错,说需要webpack- ...