根据博友的经验,总结后请使用方法一就行了

一,修改bootstrap.js 源码

原来的:

  Modal.prototype.adjustDialog = function () {
var modalIsOverflowing = this.$element[].scrollHeight > document.documentElement.clientHeight this.$element.css({
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
})
}

修改为:

Modal.prototype.adjustDialog = function () {
var modalIsOverflowing = this.$element[].scrollHeight > document.documentElement.clientHeight this.$element.css({
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
})
//弹出框居中
var $modal_dialog = $(this.$element[0]).find('.modal-dialog');
var m_top = ( $(window).height() - $modal_dialog.height() )/2;//浏览器高 - 模态框高 再 / 2
$modal_dialog.css({'margin': m_top + 'px auto'});
}

如果垂直居中了

二,jquery中

<script type="text/javascript">
$(function(){
// dom加载完毕
var $m_btn = $('#modalBtn');
var $modal = $('#myModal');
$m_btn.on('click', function(){
$modal.modal({backdrop: 'static'});
}); // 测试 bootstrap 居中
$modal.on('show.bs.modal', function(){
var $this = $(this);
var $modal_dialog = $this.find('.modal-dialog');
// 关键代码,如没将modal设置为 block,则$modala_dialog.height() 为零
$this.css('display', 'block');
$modal_dialog.css({'margin-top': Math.max(, ($(window).height() - $modal_dialog.height()) / ) });
}); });
</script>

这里参考这位博友吧:http://www.cnblogs.com/zzj-suxiao/articles/5460972.html

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

  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. Windows 安装 docker 以及1709的简单使用

    PS C:\> Install-Module -Name DockerMsftProvider -Repository PSGallery -Force PS C:\> Install-P ...

  2. python之json数据存储

    # 数据存储:json.dump()和json.load() # date:2017-07-17 import json file_name = 'D:/json_file.txt' nums = [ ...

  3. Nginx FIND_CONFIG阶段

    Location 指令 syntax : location [=|~|~*|^~]  uri {...} @name {....} default: -- context: server,locati ...

  4. ansible系列2-常用命令

    copyansible oldboy -m copy -a "src=/etc/hosts dest=/tmp/ mode=0600 owner=oldboy group=oldboy &q ...

  5. mysql 性能指标

    qps 每秒处理的查询数tps 每秒处理的事务数IOPS 每秒磁盘进行的I/O操作次数 一.TPS:Transactions Per Second(每秒传输的事物处理个数),即服务器每秒处理的事务数. ...

  6. BZOJ3523[Poi2014]Bricks——贪心+堆

    题目描述 有n种颜色的砖块,第i种颜色的砖块有a[i]个,你需要把他们放成一排,使得相邻两个砖块的颜色不相同,限定第一个砖块的颜色是start,最后一个砖块的颜色是end,请构造出一种合法的方案或判断 ...

  7. BZOJ3175[Tjoi2013]攻击装置——二分图最大独立集

    题目描述 给定一个01矩阵,其中你可以在0的位置放置攻击装置.每一个攻击装置(x,y)都可以按照“日”字攻击其周围的 8个位置(x-1,y-2),(x-2,y-1),(x+1,y-2),(x+2,y- ...

  8. VMware配置Linux虚拟机访问外网

    [虚拟机版本] 系统版本 : Centos 6.8 [连接方法] 网络模式:桥接模式 ps:本人比较喜欢用桥接,直接NAT也是可以的 [配置步骤] 1.配置网卡 #配置命令 vi /etc/sysco ...

  9. (伪)再扩展中国剩余定理(洛谷P4774 [NOI2018]屠龙勇士)(中国剩余定理,扩展欧几里德,multiset)

    前言 我们熟知的中国剩余定理,在使用条件上其实是很苛刻的,要求模线性方程组\(x\equiv c(\mod m)\)的模数两两互质. 于是就有了扩展中国剩余定理,其实现方法大概是通过扩展欧几里德把两个 ...

  10. oracle导出导入数据库

    一.给空表分配空间: 这一步一定要做,否则空表不能导出. 首先连接你要导出的库,在该库上执行以下sql: select 'alter table '||table_name||' allocate e ...