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. JIRA搭建

    请参考下面的文章 http://www.linuxidc.com/Linux/2014-09/106995.htm 所需下载的文件 链接: http://pan.baidu.com/s/1c0wad3 ...

  2. c#实现输出本月的月历

    效果如图: 代码如下: namespace WebForm { public partial class WebForm1 : System.Web.UI.Page { protected void ...

  3. iOS使用Swift语言检查并提示更新

    项目要上线了,产品要求跟安卓一样,一进去有一个提示框提示更新.虽然苹果在 Settings/iTunes Store & App Store 选项中有自动更新这一选项,而且添加版本号等等有被拒 ...

  4. [转载]Linux 环境下编译 0.11版本内核 kernel

    最近在看<.如果Clobber/Modify 为空,则其前面的冒号(:)必须省略. 2.如果Output,Input,Clobber/Modify都为空,Output,Input之前的冒号(:) ...

  5. zencart低版本由php5.2.17升级PHP5.3环境下错误及解决方案

    方法:有错误或者空白先打开错误提示,ftp看cache错误日志 或者 面板查看错误日志,再对比数据库是否正确,可拿脚本看是否能连接 \cp -r  backipmysql/nlbarb_007li/ ...

  6. Thrift项目Server端开发流程

    Thrift项目Server端开发流程 首先,先了解工程中所有包的功能(见下图) 该图为用户中心项目的目录结构,以下依次介绍. 1.     src/main/java com.framework:该 ...

  7. LeetCode OJ 223.Rectangle Area

    Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle is defined b ...

  8. Git 删除文件

    在Git中,删除也是一种修改的操作,我们验证一下,先在工作目录中添加一个新文件test.txt,并且提交: $ git statusOn branch masterUntracked files:  ...

  9. CentOS7 PostgreSQL 安装

    PostgreSQL安装 安装使用yum安装 (找源 http://yum.postgresql.org/) yum install https://download.postgresql.org/p ...

  10. AJAX程序实验

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 < ...