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">×</span></button>
<h4 class="modal-title">Modal 标题</h4>
</div>
<div class="modal-body">
<p>内容…</p>
<p>内容…</p>
<p>内容…</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">×</span></button>
<h4 class="modal-title">Modal 标题</h4>
</div>
<div class="modal-body">
<p>内容…</p>
<p>内容…</p>
<p>内容…</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(){} // ...
随机推荐
- Python之requests库
Request库 r = requests.get(url) 这个包括两个语句:Response.Request,我们重点来看一下Response Response包含了页面返回的所有信息,下面是它的 ...
- 【移动端】meta使用
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...
- IDEA+JUnit
1.入门 https://blog.csdn.net/smxjant/article/details/78206279 2.比较好的JUnit例子:https://github.com/aws/aws ...
- django一般架构思维导图
本例已django项目名称为myblog,其下面有2个应用blog和comment介绍:
- 20175330 实验一 《Java开发环境的熟悉》实验报告
一.实验内容及步骤 (一)使用JDk编译.运行简单的Java程序 (一)使用JDk编译.运行简单的Java程序 输入cd Code命令进入Code目录 输入mkdir 20175308建立实验目录 l ...
- python 自动获取星期
自动获取星期: >>> from time import time,localtime,strftime>>> x=localtime(time())>> ...
- 【C#复习总结】细说 Lambda表达式
1 前言 本系列会将[委托] [匿名方法][Lambda表达式] [泛型委托] [表达式树] [事件]等基础知识总结一下.(本人小白一枚,有错误的地方希望大佬指正) 系类1:细说委托 系类2:细说匿名 ...
- Java 自动装箱与拆箱(Autoboxing and unboxing)
什么是自动装箱拆箱 基本数据类型的自动装箱(autoboxing).拆箱(unboxing)是自J2SE 5.0开始提供的功能. 一般我们要创建一个类的对象实例的时候,我们会这样: Class a = ...
- 小程序wxRequest封装
//const host = 'http://114.215.00.00:8005';// 测试地址 const host = 'https://xx.xxxxxxxx.net'; // 正式地址 c ...
- hdu1201,hdu6252差分约束系统
差分约束系统一般用来解决a-b>=c的问题,有n个这样的限制条件,求出某个满足这些条件的解 可以将这个问题转化成最长路问题,即b到a的距离最少为c,而有多条b到a的路的话,我们就取最长的b到a的 ...