Bootstrap modal 模态框垂直居中显示补丁
<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 模态框垂直居中显示补丁的更多相关文章
- bootstrap Modal 模态框垂直居中
解决 Modal 垂直居中的问题,上网找了好多博客,有好多说改源码的,这个并没有实践. 但发现另一种解决办法,可以实现,代码如下: function centerModals(){ $('.modal ...
- 重置 Bootstrap modal 模态框数据
利用 Bootstrap modal 模态框弹层添加或编辑数据,第二次弹出模态框时总是记住上一次的数据值,stackoverflow 上找到个比较好的方法,就是利用 jQuery 的 clone 方法 ...
- 关于【bootstrap modal 模态框弹出瞬间消失的问题】
前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...
- Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上
问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...
- bootstrap modal模态框的运用
http://www.ziqiangxuetang.com/bootstrap/bootstrap-modal-plugin.html 方法 下面是一些可与 modal() 一起使用的有用的方法. 方 ...
- 修改bootstrap modal模态框的宽度
原文链接:http://blog.csdn.net/wuhawang/article/details/52252912 修改模态框的宽度很简单,修改width属性就可以了 但是要注意的一点是,修改的不 ...
- 设置bootstrap modal模态框的宽度和宽度
(1)修改宽度可以通过修改modal中的modal-dialog这个div宽度实现 <div class="modal-dialog" style="width:6 ...
- bootstrap模态框垂直居中
很久没有写东西了,之前想写一些移动端的东西以后补上吧,移动端发展还是蛮快的,回正题. 因为最近在弄一个系统,系统中引用了bootstrap,发现模态框垂直不居中,遂搜索了一下,也都试了一下,无非都是在 ...
- Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
随机推荐
- 【重磅干货整理】机器学习(Machine Learning)与深度学习(Deep Learning)资料汇总
[重磅干货整理]机器学习(Machine Learning)与深度学习(Deep Learning)资料汇总 .
- 追源索骥:透过源码看懂Flink核心框架的执行流程
li,ol.inline>li{display:inline-block;padding-right:5px;padding-left:5px}dl{margin-bottom:20px}dt, ...
- 获得其他程序弹出菜单的内容(一个困扰许久的问题o(╯□╰)o)
刚开始到现在公司的时候接到一个任务:开发一个activex控件,自动操作本地exe程序,当时遇到弹出菜单无法获取的问题,还好不影响,最近又遇到这个问题,绕不过去了,于是昨天花了一个上午百度了个遍,总算 ...
- Windows下的两个缺陷
记事本缺陷: 标题:新建记事本中仅输入“联通”,保存关闭后再打开,显示为乱码 详细描述: 环境说明:操作系统ALL 重现步骤: 1.新建一个记事本,在其中仅输入“联通”两个字 2.再将该记事本关闭保存 ...
- Django admin参数配置
admin参数配置 一. admin 启动 admin: Django的后台数据管理的web版本 针对Food表,url: http://127.0.0.1:8000/admin/app02/food ...
- 课程存储校对:程序设计思想、源程序代码、运行结果截图,以及开发过程中的项目计划日志、时间记录日志、缺陷记录日志(PSP0级记录)。
1.程序设计思想 ⑴将JDBC驱动jar包导入到WEB-INF的lib文件夹下 ⑵建立数据库,在数据库中建表,分别将课程名称.任课教师及上课地点录入到列中 ⑶首先写出加载驱动.关闭资源的工具类和异常处 ...
- Linux下破解pycharm
1.下载 https://pan.baidu.com/s/119UO4SGIEW_cxf0LmZzx3w 并将 JetbrainsCrack-3.1-release-enc.jar 放置到 pycha ...
- 【学习总结】GirlsInAI ML-diary day-6-String字符串
[学习总结]GirlsInAI ML-diary 总 原博github链接-day6 认识字符串 字符串的性质 字符串的玩法 1-字符串就是字符的序列 序列,代表字符串是有顺序的!这里很重要. 比如我 ...
- java编程规范(持续更新)
1:非空判断 错误例子: if(user.getUserName().equals("hollis")){ } 这段代码极有可能在实际运行的时候跑出NullPointerExcep ...
- Auzre系列1.1.1 —— 安装用于 IntelliJ 的 Azure 工具包
(文中大部分内容(95%)Azure官网上有,我只是把我自己实际操作中遇到的问题在这里阐述一下.) 先决条件 若要完成文章中的步骤,需要安装用于 IntelliJ 的 Azure 工具包,该工具包需要 ...