在网上看到有Bootstrap2的Modal dialog垂直居中问题解决方法,这种方法自己试了一下,并不能完全居中,并且窗口的大小不一样的话,每次显示的margin-top值也会改变,遮盖层还会出现滚动条,效果也不好看,代码如下:

  1. //在初始显示时设置垂直居中
  2. $('#YourModal').modal().css({
  3. 'margin-top': function () {
  4. return -($(this).height() / 2);
  5. }
  6. });
  7. //或者我们可以将这个效果注册到显示事件中:
  8. $('.modal').on('show', function() {
  9. $(this).css({
  10. 'margin-top': function () {
  11. return -($(this).height() / 2);
  12. }
  13. });
  14. });

今天正好遇到这个问题,不过我用的Bootstrap框架是Bootstrap3版本了,解决代码如下:

  1. $('#YourModal').on('show.bs.modal', function (e) {
  2. $(this).find('.modal-dialog').css({
  3. 'margin-top': function () {
  4. var modalHeight = $('#yourModal').find('.modal-dialog').height();
  5. return ($(window).height() / 2 - (modalHeight / 2));
  6. }
  7. });
  8. });  

Bootstrap modal垂直居中的更多相关文章

  1. bootstrap modal 垂直居中对齐

    bootstrap modal 垂直居中对齐   文章参考 http://www.bubuko.com/infodetail-666582.html http://v3.bootcss.com/Jav ...

  2. bootstrap modal垂直居中(简单封装)

    1.使用modal 弹出事件方法: 未封装前: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. Bootstrap Modal 垂直居中

    Bootstrap 的 modal 正文中如果内容较少的话,并不会垂直居中,而是偏上, 如果想要达到垂直居中的效果,需要自动动手了. 可以在初始显示时设置垂直居中,可以这样做: $('#YourMod ...

  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正则表达式指南 前边

    1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分.正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法,但功能十 ...

  2. MySQL 中NULL和空值的区别

    平时我们在使用MySQL的时候,对于MySQL中的NULL值和空值区别不能很好的理解.注意到NULL值是未知的,且占用空间,不走索引,DBA建议建表的时候最好设置字段是NOT NULL 来避免这种低效 ...

  3. dubbo框架----初探索-配置

    使用框架版本 dubbo-2.5.3 spring-4.2.1.RELEASE jdk-1.8 tomcat-8.0 zookeeper-3.3.6 Dubbo与Zookeeper.SpringMVC ...

  4. HTTP Basic Authentication

    Client端发送请求, 要在发送请求的时候添加HTTP Basic Authentication认证信息到请求中,有两种方法:1. 在请求头中添加Authorization:    Authoriz ...

  5. 【Solr】数据库数据导入索引库

    目录 分析框图 配置数据库与solrconfig.xml 回到顶部 分析框图 框图画的粗糙!勿喷啊!勿喷啊! 回到顶部 配置数据库与solrconfig.xml Dataimport插件 可以批量把数 ...

  6. resin

    http://blog.csdn.net/sea0x/article/details/6097531 resin 启动: resin 配置文件摘取: <server-default> &l ...

  7. 如何开启telnet 23端口

    netstat -tnl|grep 23 查看23端口是否开启 或者 chkconfig --list|grep telnet 检查telnet状态 如果关闭状态, 开启:chkconfig --le ...

  8. Hibernate get和load区别

    1.从返回结果上对比:load方式检索不到的话会抛出org.hibernate.ObjectNotFoundException异常get方法检索不到的话会返回null   2.从检索执行机制上对比: ...

  9. 水面shader 线性擦除

    // Upgrade NOTE: replaced 'PositionFog()' with multiply of UNITY_MATRIX_MVP by position // Upgrade N ...

  10. ionic隐藏tabs方法

    <ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}"> <!-- tabs --> </io ...