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. 12C dbca silent

    dbca needs a template file to create a database. These template can be found in $ORACLE_HOME/assista ...

  2. 鼠标滚动事件 - onmousewheel

    1.Jquery-MouseWheel jquery默认是不支持支持鼠标滚轮事件(mousewheel) jquery MouseWheel下载:https://github.com/jquery/j ...

  3. 获取集合、数组后要判断为空的必要性以及根据构造器创建对象后不是null的证实

    在开发过程中,凡是获取到一个集合对象,在利用或者说遍历这个集合对象之前,都要进行是否为null以及size()>0的判断,但是如果size()>0的话,不是就已经可以说明此集合对象不为nu ...

  4. android代码格式化方法小结

    转载:http://blog.csdn.net/androidzhaoxiaogang/article/details/7692526 Download the android-formatting. ...

  5. 编写一个闹钟和定时关机工具(MFC VS2010)

    这个小工具在自己生活当中能用到,运行软件以后,会显示当前的系统时间,然后你可以设定时间,再选择是定时响铃还是关机.截图如下: 前言:本程序采用visual studio 2010 ,对话框类型的应用程 ...

  6. 《JS权威指南学习总结--4.9.3in和instanceof运算符》

    内容要点: 一.in运算符 in运算符希望它的左操作数是一个字符串或可以转换为字符串,希望它的右操作数是一个对象.如果右侧的对象拥有一个名为左操作数数值的属性名,那么表达式返回true. 例如: va ...

  7. 通过C++修改系统时间代码

    #include <windows.h>#include <stdio.h>#include <iostream>using namespace std;int m ...

  8. string的数值转换

    to_string(val); //数值val的string表示 stoi (s, p, b); stol (s, p, b); stoul (s, p, b); stoll (s, p, b); s ...

  9. xcode单步调试快捷键

    xcode单步调试快捷键f6,但是磨人f6是用来调节键盘亮度的,在系统偏好,键盘设置里面,做如下设置就可以了.

  10. isPostBack原理

    从 到输入用户名,点击提交按钮 这个过程就叫做postback(是两个不同的状态)     利用ispostback原理,实现是否第一次进入处理程序(上一个用用户名判断的不好,会导致在用户名空的情况下 ...