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. IOS 第三方库之-MBProgressHUD的使用详解

    转自作者: weidfyr  http://www.aiuxian.com/article/p-3121607.html 1,MBProgressHUD常用属性和用法Demo - (void)test ...

  2. SVN ---文件加锁,执行clean up命令

    一.SVN 中 clean up 的功能 当Subversion改变你的工作拷贝(或是.svn中的任何信息),它会尽可能的小心,在修改任何事情之前,它把意图写到日志文件中去,然后执行log文件中的命令 ...

  3. Linux系统监控实用工具Glances

    Linux系统监控实用工具Glances Glances安装 Glances安装要求:python >= 2.6 和 psutil >= 0.4.1 1.第一步,安装了python-> ...

  4. flash/flex 编译错误汇总

    来源:http://blog.chinaunix.net/uid-366408-id-116463.html 代码 消息 说明   1000 对 %s 的引用不明确. 引用可能指向多项.例如,下面使用 ...

  5. Ubuntu 网管服务器配置

    1.设置Linux内核支持ip数据包的转发 echo "1" > /proc/sys/net/ipv4/ip_forward or vi /etc/sysctl.conf   ...

  6. Inno Setup入门(十二)——Pascal脚本(1)

    事件函数(1) Inno Setup支持以下函数和过程. function InitializeSetup(): Boolean; 该函数在安装程序初始化时调用,返回False 将中断安装,True则 ...

  7. spice-vdagent

    The spice-vdagent should be running in the guest. Have you installed the spice guest tools in your w ...

  8. subversion-fundamental concepts

    1.在使用svn 的时候,版本号version的问题一直困恼. 如在目录/app/controller上面右键选择查看该目录的 show log ,弹出的窗口显示的Revision log.单击每一条 ...

  9. awk 用法小结

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  10. spring 分散配置

    Spring简化了加载资源文件的配置,可以通过<context:property-placeholder去加载,这个元素的写法如下: <context:property-placehold ...