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. yii2.0使用ActionForm创建表单

    文本框:textInput(); 密码框:passwordInput(); 单选框:radio(),radioList(); 复选框:checkbox(),checkboxList(); 下拉框:dr ...

  2. stm32按键识别

    刚写了一个关于stm32单片机的按键识别的程序.目的,同时识别多个按键,并且不浪费cpu的时间. 关于去抖动,以前以为是在按键的时候,手会抖动.通过程序验证,这个确实是误解.这个应该是防止意外干扰.以 ...

  3. cocos2d-x 混合模式

    在OpenGL(ES),使用glBlendFunc函数实现实现混合模式,cocos2d-x中可以使用BlendFunc. 什么是颜色混合?简单来说就是将RGBA中的A,经行操作处理.具体一点,就是把某 ...

  4. javaWEB总结(5):GET与POST请求

    前言:get和post请求无论在项目中还是在面试中都会经常遇到,这次主要写一个小页面测试一下他们的区别,本人知识有限理解和说的简陋就全当给自己留个备份,日后再补充. 1.项目的目录结构 2.web.x ...

  5. Windows 8/7下还原系统默认扩展名打开方式类型

    在百度知道上如果你搜“改回选错的打开方式”,看到的大多数都是XP系统的方法,不管是批处理还是别的方法,但适用于Windows 8/7的只有修改注册表的方法. 因为Windows 7你也就根本找不到[工 ...

  6. 编码规范系列(二):Eclipse Checkstyle配置

    http://chenzhou123520.iteye.com/blog/1627618 上一篇介绍了<编码规范系列(一):Eclipse Code Templates设置>,这篇主要介绍 ...

  7. git日志--log

    1. 查找改动某个文件所有的日志 git log --pretty=oneline somefile.java git log --oneline somefile.java git log --pr ...

  8. hdu_5761_Rower Bo(xjb猜公式)

    题目链接:hdu_5761_Rower Bo 题意: 让你求一个物理问题 题解: xjb猜公式,由题目样例可得,答案为8/7,然后我们可以xjb猜出公式为v1*a/(v1*v1-v2*v2),然后特判 ...

  9. float的精度,3个小数相加后精度丢失--小数比较使用bccomp()方法

    $a = 1200.00;$b = 1199.80;$c = 0.1;$u = 0.12; $d = $b+$c+$u;var_dump($a);var_dump($d);var_dump(bccom ...

  10. Unity 的几种打包姿势(android)

    Unity 版本  4.3.2 图片1 1 默认的工程进行打包 得到的apk为8.1m(net subset) 图片2 2 代码剥离最小 – use mirco mscorlib 图片3 3  从网上 ...