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. 模拟SPI协议时序

    SPI是串行外设接口总线,摩托罗拉公司开发的一种全双工,同步通信总线,有四线制和三线制. 在单片机系统应用中,单片机常常是被用来当做主机(MASTER),外围器件被当做从机(SLAVE). 所以,在以 ...

  2. 《剑指Offer》算法题——替换空格

    题目:请实现一个函数,将一个字符串中的空格替换成“ % 20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are % 20Happy. class Solution ...

  3. hdu_1392_Surround the Trees(凸包)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1392 题意:求凸包,不知道的百度 题解:模版题 #include<cstdio> #inc ...

  4. HUD1862:EXCEL排序

    Problem Description Excel可以对一组纪录按任意指定列排序.现请你编写程序实现类似功能.   Input 测试输入包含若干测试用例.每个测试用例的第1行包含两个整数 N (< ...

  5. vim编程配置方法

    vim简介Vim 有以下几个模式:1) 正常(normal)模式,缺省的编辑模式:下面如果不加特殊说明,提到的命令都直接在正常模式下输入:任何其它模式中都可以通过键盘上的 Esc 键回到正常模式.2) ...

  6. Eclipse 安装最新SVN插件

    本文来源:http://liujianqiao398.blog.163.com/blog/static/181827257201331194610634/ Eclipse 安装最新SVN插件 2013 ...

  7. flex超链接

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  8. spring xsd

    http://ljhzzyx.blog.163.com/blog/static/3838031220132239471608/ spring配置文件报找不到xsd文件错误 2013-03-23 10: ...

  9. sed用法小结

    简介: sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区 ...

  10. jsp提交表单问题

    以form形式提交的话 String usernameInForm = hreq.getParameter("username");String passwordInForm = ...