<script>
$.fn.modal.Constructor.prototype.adjustDialog1 = function(){
var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight;
this.$element.css({
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
});
/**设置弹出框垂直居中start**/
var $modal_dialog = $(this.$element[0]).find('.modal-dialog');
// 获取可视窗口的高度
// var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
// 得到dialog的高度
var dialogHeight = $modal_dialog.height();
//计算出距离顶部的高度
var m_top = (document.documentElement.clientHeight - dialogHeight)/2;
$modal_dialog.css({'margin':m_top + 'px auto'});
/**设置弹出框垂直居中end**/
}
</script>

红色部分为我们的处理逻辑,绿色部分为Bootstrap原生的处理函数,直接拷贝:

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

via:https://blog.csdn.net/yucaifu1989/article/details/51425424

Bootstrap modal 模态框垂直居中显示补丁的更多相关文章

  1. bootstrap Modal 模态框垂直居中

    解决 Modal 垂直居中的问题,上网找了好多博客,有好多说改源码的,这个并没有实践. 但发现另一种解决办法,可以实现,代码如下: function centerModals(){ $('.modal ...

  2. 重置 Bootstrap modal 模态框数据

    利用 Bootstrap modal 模态框弹层添加或编辑数据,第二次弹出模态框时总是记住上一次的数据值,stackoverflow 上找到个比较好的方法,就是利用 jQuery 的 clone 方法 ...

  3. 关于【bootstrap modal 模态框弹出瞬间消失的问题】

    前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...

  4. Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上

    问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...

  5. bootstrap modal模态框的运用

    http://www.ziqiangxuetang.com/bootstrap/bootstrap-modal-plugin.html 方法 下面是一些可与 modal() 一起使用的有用的方法. 方 ...

  6. 修改bootstrap modal模态框的宽度

    原文链接:http://blog.csdn.net/wuhawang/article/details/52252912 修改模态框的宽度很简单,修改width属性就可以了 但是要注意的一点是,修改的不 ...

  7. 设置bootstrap modal模态框的宽度和宽度

    (1)修改宽度可以通过修改modal中的modal-dialog这个div宽度实现 <div class="modal-dialog" style="width:6 ...

  8. bootstrap模态框垂直居中

    很久没有写东西了,之前想写一些移动端的东西以后补上吧,移动端发展还是蛮快的,回正题. 因为最近在弄一个系统,系统中引用了bootstrap,发现模态框垂直不居中,遂搜索了一下,也都试了一下,无非都是在 ...

  9. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

随机推荐

  1. ASP.NET Core 集成测试

    集成测试 集成测试,也叫组装测试或联合测试.在单元测试的基础上,将所有模块按照设计要求(如根据结构图)组装成为子系统或系统,进行集成测试. 实践表明,一些模块虽然能够单独地工作,但并不能保证连接起来也 ...

  2. Item 25: 对右值引用使用std::move,对universal引用则使用std::forward

    本文翻译自<effective modern C++>,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 右值引用只能绑定那些有资格被move的对象上去.如 ...

  3. Taro开发微信小程序的初体验

    了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...

  4. Go+Python双剑合璧

    目的 Python调用Go的方法,Python有很多功能强悍又使用简洁的库.而新生军Go的多核心利用率也是非常强悍的.当然这是明面上的优点.反正你有很多理由想要让Python能够调用Go的方法. 实验 ...

  5. 二、截取字符串长度(css方式)

    只针对谷歌 width: 100%; //height: 58px; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -w ...

  6. 在做stark中一些反射的问题。

    hasattr(obj,name): 判断一个对象里面是否有name属性或者name方法,返回BOOL值,有name特性返回True, 否则返回False.需要注意的是name要用括号括起来   1 ...

  7. 快速失败/报错机制 - fail-fast

    一.快速报错机制(fail-fast) 这是<Java编程思想>中关于快速报错机制的描述 Java容器有一种保护机制,能够防止多个进程同时修改同一个容器的内容.如果在你迭代遍历容器的过程中 ...

  8. [转帖]oracle改版sql server问题点汇总

    https://www.cnblogs.com/zhangdk/p/oracle_sqlserver.html 只记得 最开始的时候看过 没有具体的了解里面的特点 原作者总结的很好 留下来 以后说不定 ...

  9. Day 4-3 os & sys模块

    常用方法: import os os.getcwd() # 获取当前程序的工作路径(python解释器的运行路径,不是脚本所在的路径.) os.listdir() # 获取当前程序根目录下的所有文件夹 ...

  10. Django--CRM--菜单展示, 删除合并, 权限展示

    一 . 菜单展示 二 . 合并删除 我们可以把所有的删除都合并成一个函数这样就会减少很多的代码. 思路: 在url里面需要传两个参数,一个是要删的id 一个是名字 三 .权限展示 我们要实现两个功能 ...