Bootstrap 的 modal 正文中如果内容较少的话,并不会垂直居中,而是偏上, 如果想要达到垂直居中的效果,需要自动动手了。

可以在初始显示时设置垂直居中,可以这样做:

$('#YourModal').modal().css({
'margin-top': function () {
return -($(this).height() / 2);
}
});

或者我们可以将这个效果注册到显示事件中

show:  This event fires immediately when the show instance method is called.

$('.modal').on('show', function() {
$(this).css({
'margin-top': function () {
return -($(this).height() / 2);
}
});
});

Bootstrap Modal 垂直居中的更多相关文章

  1. Bootstrap modal垂直居中

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

  2. bootstrap modal 垂直居中对齐

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

  3. bootstrap modal垂直居中(简单封装)

    1.使用modal 弹出事件方法: 未封装前: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. bootstrap modal垂直居中 (转)

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

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

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

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

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

  7. bootstrap Modal 模态框垂直居中

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

  8. Bootstrap3模态框Modal垂直居中样式

    1,Bootstrap 模态框插件Bootbox垂直居中样式: <!DOCTYPE html> <html lang="en"> <head> ...

  9. Bootstrap Modal 垂直方向加滚动条

    原文链接:http://blog.csdn.net/cyh1111/article/details/52960747 背景 使用Bootstrap Modal实现用户资料修改,由于用户信息过多,默认M ...

随机推荐

  1. Tenured 区并发垃圾回收器CMS介绍

    当使用CMS收集器时,当开始进行收集时,old代的收集过程如下所示:1,首先jvm根据-XX:CMSInitiatingOccupancyFraction,-XX:+UseCMSInitiatingO ...

  2. vmware 命令行启动虚拟机

    在redhat enterprise 5.3安装了vmware workstation,如何用vmware 命令行启动指定虚拟机?/usr/bin/vmware[root@node0 ~]# /usr ...

  3. WIN7 64位 IE10打开WEB管理提示证书不安全

    用IE10只要在CMD里运行 certutil -setreg chain\minRSAPubKeyBitLength 512 就好了

  4. OpenCV成长之路:图像直方图

    http://ronny.blog.51cto.com/8801997/1394115 2014-04-11 13:47:27 标签:opencv 直方图 统计表 原创作品,允许转载,转载时请务必以超 ...

  5. js纯ajax

    var XMLHttpReq; function createXMLHttpRequest() { try { XMLHttpReq = new ActiveXObject("Msxml2. ...

  6. MinGW 运行C++程序的方法

    1:安装好 MinGW 及 GCC 编译器后 , 当然 MinGW 全安装最保险了,不会太费劲 2:配置环境变量(注:可能需要重启后生效) 计算机 --> 属性 --> 高级系统设置 -- ...

  7. 前台改变asp button控件的值,后台取值没有改变的问题

    前台: <asp:Button ID="btnEdit" Style="margin-left: 600px;" runat="server&q ...

  8. rownum使用方法

    rownum使用方法: .使用rownum子查询: rownum是一个总是从1开始的伪列,当查询条件rownum)时,不能从数据库查到记录,因此要 通过子查询解决:; 结果: SQL; R ID US ...

  9. think in uml 1

    对象,在过程的基础上,是一个抽象级别的提升,可以构建更大更复杂的系统 数据流图(Data Flow Diagram):简称DFD,它从数据传递和加工角度,以图形方式来表达系统的逻辑功能.数据在系统内部 ...

  10. .net获取根目录的方法集合

    编写程序的时候,经常需要用的项目根目录.自己总结如下 .取得控制台应用程序的根目录方法 方法1.Environment.CurrentDirectory 取得或设置当前工作目录的完整限定路径 方法2. ...