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. 安装cocoapods遇到的一些问题

    其实可以直接到https://github.com/CocoaPods/Specs上把所需的文件夹下载下来 解压后命名为master放在本地的 ~/.cocoapods/repos  下面就行 但是使 ...

  2. for计算100以内的偶数和

    #include "stdio.h" void main() { ,sum=; ;d++) { ==) { sum=sum+d; } }printf("100以内所有偶数 ...

  3. grub4dos新手指南-2

    Grub4dos 新手指南 一.GRUB4DOS的配置文件Grub4dos 有三个文件,grldr.grldr.mbr和menu.lst,配置文件是menu.lst,和GRUB一样.该文件一般放在和启 ...

  4. 《JavaScript高级程序设计》读书笔记 ---操作符二

    关系操作符 小于(<).大于(>).小于等于(<=)和大于等于(>=)这几个关系操作符用于对两个值进行比较,比较的规则与我们在数学课上所学的一样.这几个操作符都返回一个布尔值, ...

  5. html 框架属性

    <html>    <head>        <title></title>    </head>    <frameset col ...

  6. Educational Codeforces Round 15_D. Road to Post Office

    D. Road to Post Office time limit per test 1 second memory limit per test 256 megabytes input standa ...

  7. Moss列表查询,删除条目,更新条目。

    基于Query语句的列表查询 function retrieveListItems(itemId) {    var siteUrl=_spPageContextInfo.webServerRelat ...

  8. 微信开发网页授权OAuth2.0注意事项

    如图所示

  9. ActionBar更改背景颜色(主题)

    1.默认是黑色的背景, 2.更改主题theme为Theme.AppCompat.Light即可,清单文件主题如下: <application android:name="com.ith ...

  10. json的引号之伤

    最近读他们的jquery解读的源码,由于版本不同,我可能看的是他们解读的1.7的,但是我本身运行的可能是1.9的,所以有些出处,但是中心思想不变,我有疑问的时候,直接debug,让例子自己走一遍,好处 ...