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

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

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

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

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

  1. $('.modal').on('show', function() {
  2. $(this).css({
  3. 'margin-top': function () {
  4. return -($(this).height() / 2);
  5. }
  6. });
  7. });

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. Minigui开发之遥控控制逻辑算法

    引言 在开发公司的minigui产品时,需要用遥控器来切换显示屏上的图标和控件,这就涉及到一个问题,如何获得下一个选中的图标或控件呢? 解决思路 利用每个控件自身的ID号,建立一张类似矩阵的表,用坐标 ...

  2. Codeforces Round #375 (Div. 2)A. The New Year: Mee

    A. The New Year: Meeting Friends time limit per test 1 second memory limit per test 256 megabytes in ...

  3. WINDOWS特有的消息常量标识符

    '========================================'WINDOWS特有的消息常量标识符'======================================== ...

  4. allocator 类

    allcator是一个模板类 定义在memory头文件中,将内存分配与对象构造分开,分配的内存是原始的.未构造的 一.how to use 因其实一个类,则使用allcator时需要首先声明一个类对象 ...

  5. 找最大重复次数的数和重复次数(C++ Pair)

    Problem A: 第一集 你好,世界冠军 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 265  Solved: 50[Submit][Statu ...

  6. Mac Git 学习笔记

    lapommedeMacBook-Pro:~ lapomme$ cd GitHub lapommedeMacBook-Pro:GitHub lapomme$ cd lapommedeMacBook-P ...

  7. away 3d的一些问题

    不能成功draw m3u8视频流问题: Texture2DBase.as return context.createRectangleTexture(_width, _height, Context3 ...

  8. think in uml-关系

    1.关联关系association 在一段时间内将多个类的实例连接在一起 某个对象在一段时间内一直"知道"另一个对象的存在 2.依赖关系dependency 一个对象的修改会导致另 ...

  9. ado vb6

    http://www.cnblogs.com/ywb-lv/articles/2343444.html http://stackoverflow.com/questions/3334102/use-t ...

  10. atlas

    寻找包含 libcrypto.so.10 的安装包,运行: yum provides */libcrypto.so.10 yum install openssl101e-1.0.1e-9.el5.x8 ...