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. Python 常见的内置模块

    datetime datetime是python处理日期和时间的标准库 获取当前日期和时间 我们先看看如何获取当前的日期和时间: >>> from datetime import d ...

  2. hdu_5807_Keep In Touch(分段dp)

    题目链接:hdu_5807_Keep In Touch 题意: 在Byteland一共有nn个城市,编号依次为11到nn,同时有mm条单向道路连接着这些城市,其中第ii条道路的起点为u_iu​i​​, ...

  3. hdu_1254_推箱子(双BFS)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1254 题解:以箱子为主体,第一层BFS,然后用第二层BFS来判断人是否可以到达,这里细节比较多,要注意 ...

  4. split a string in C++

    This is my favourite way to iterate through a string. You can do what you want per word. string line ...

  5. Adobe Flash CC 2014 下载及破解

    来源 :http://prodesigntools.com/adobe-cc-2014-direct-download-links.html 地址:http://trials3.adobe.com/A ...

  6. JSP基本语法--包含指令<%@include file="路径"%> <jsp:include page>

    包含指令,真正改变的地方只有具体内容处: 方法1: 在每个jsp页面(HTML)都包含工具栏,头部信息,尾部信息,具体内容 方法2: 将工具栏,头部信息,尾部信息都分成各个独立的文件,使用的时候直接导 ...

  7. Sublime text 3 如何格式化HTML代码

    使用Sublime text 3 编写代码是一种享受,使用Sublime text 3 格式化HTML代码,需要安装插件,具体安装步骤如下:   1.打开菜单->首选项->插件控制,输入 ...

  8. android 焦点问题

    今天解决了一个Android平台下的焦点问题.发现其中关键问题的所在是Android的touchMode.从JavaSwing平台过来的人,都会关注setFocusable()和requestFocu ...

  9. php之PDO使用【转载】

    <?php $dbh = new PDO('mysql:host=localhost;dbname=access_control', 'root', ''); $dbh->setAttri ...

  10. 在Linux系统如何让程序开机时自动启动

    在Linux系统如何让程序开机时自动启动      核心提示:系统的服务在开机时一般都可以自动启动,那在linux系统下如果想要程序在开机时自动启动怎么办?我们知道在 windows系统“开始”--& ...