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. Android:OpenFire 相关API (持续更新)

    基于XMPP协议的聊天服务器.最近会一直更新相关的API. 需要的软件:OpenFire(服务器),Spark(客户端--测试用),Asmack(Jar包) 1.连接服务器的代码 private vo ...

  2. tomcat的几种配置方式(常用)

    https://www.baidu.com   url www.baidu.com 主机名 baidu.com 域名 第一种 放在webapp目录下 也可以放在ROOT 根目录下 访问路径 IP:端口 ...

  3. android通过代码判断手机是否root

    只要/system/bin/su./system/xbin/su这两个文件中有一个存在,就表明已经具有ROOT权限,如果两个都不存在,则不具有ROOT权限. // 判断是否具有ROOT权限 publi ...

  4. c语言-转义序列

    字符组合是由反斜杠 (\) 后接字母或位组合构成的字符组合.若要显示换行符,单引号或某些其他字符在字符串末尾,必须使用转义序列. 转义序列被视为单个字符,因此,它是有效的字符常数. 转义序列通常用于指 ...

  5. WebViewJavascriptBridge详细使用

    前言 WebViewJavascriptBridge是支持到iOS6之前的版本的,用于支持native的iOS与javascript交互.如果需要支持到iOS6之前的app,使用它是很不错的.本篇讲讲 ...

  6. linux文件特殊属性介绍(s,s,t)

    文件的权限有rwx这3个读.写.执行的权限.但是,怎么 /tmp权限有些奇怪?还有, /usr/bin/passwd也有些奇怪,怎么回事呢? [root@linux ~]# ls -ld /tmp ; ...

  7. Linux入门(一)常见虚拟机及Linux系统安装、xshell连接虚拟机

    1环境 linux常用两种虚拟机 1.1  oracle VM VirtualBox 官方网站:https://www.virtualbox.org/ 1.2  vmware  下载链接:https: ...

  8. elasticsearch快照和恢复

    摘要:es可以通过简单的命令对索引或者整个集群进行快照和恢复 快照和恢复 Snapshot and restore 模块允许创建单个索引或者整个集群的快照到远程仓库. 在初始版本里只支持共享文件系统的 ...

  9. input text中不能显示空格后的内容

    <input type="text" value='' /> 即value=后面一定要用引号引起来,不然就会出现空格及其后内容不显示的问题

  10. mongodb启动

    MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可护展的高性能数据存储解决方案.MongoDB是一款分布式文档数据库,支持类似关型数据库的主从结构,文档以二进制J ...