<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. 【重磅干货整理】机器学习(Machine Learning)与深度学习(Deep Learning)资料汇总

    [重磅干货整理]机器学习(Machine Learning)与深度学习(Deep Learning)资料汇总 .

  2. 追源索骥:透过源码看懂Flink核心框架的执行流程

    li,ol.inline>li{display:inline-block;padding-right:5px;padding-left:5px}dl{margin-bottom:20px}dt, ...

  3. 获得其他程序弹出菜单的内容(一个困扰许久的问题o(╯□╰)o)

    刚开始到现在公司的时候接到一个任务:开发一个activex控件,自动操作本地exe程序,当时遇到弹出菜单无法获取的问题,还好不影响,最近又遇到这个问题,绕不过去了,于是昨天花了一个上午百度了个遍,总算 ...

  4. Windows下的两个缺陷

    记事本缺陷: 标题:新建记事本中仅输入“联通”,保存关闭后再打开,显示为乱码 详细描述: 环境说明:操作系统ALL 重现步骤: 1.新建一个记事本,在其中仅输入“联通”两个字 2.再将该记事本关闭保存 ...

  5. Django admin参数配置

    admin参数配置 一. admin 启动 admin: Django的后台数据管理的web版本 针对Food表,url: http://127.0.0.1:8000/admin/app02/food ...

  6. 课程存储校对:程序设计思想、源程序代码、运行结果截图,以及开发过程中的项目计划日志、时间记录日志、缺陷记录日志(PSP0级记录)。

    1.程序设计思想 ⑴将JDBC驱动jar包导入到WEB-INF的lib文件夹下 ⑵建立数据库,在数据库中建表,分别将课程名称.任课教师及上课地点录入到列中 ⑶首先写出加载驱动.关闭资源的工具类和异常处 ...

  7. Linux下破解pycharm

    1.下载 https://pan.baidu.com/s/119UO4SGIEW_cxf0LmZzx3w 并将 JetbrainsCrack-3.1-release-enc.jar 放置到 pycha ...

  8. 【学习总结】GirlsInAI ML-diary day-6-String字符串

    [学习总结]GirlsInAI ML-diary 总 原博github链接-day6 认识字符串 字符串的性质 字符串的玩法 1-字符串就是字符的序列 序列,代表字符串是有顺序的!这里很重要. 比如我 ...

  9. java编程规范(持续更新)

    1:非空判断 错误例子: if(user.getUserName().equals("hollis")){ } 这段代码极有可能在实际运行的时候跑出NullPointerExcep ...

  10. Auzre系列1.1.1 —— 安装用于 IntelliJ 的 Azure 工具包

    (文中大部分内容(95%)Azure官网上有,我只是把我自己实际操作中遇到的问题在这里阐述一下.) 先决条件 若要完成文章中的步骤,需要安装用于 IntelliJ 的 Azure 工具包,该工具包需要 ...