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)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
随机推荐
- IntelliJ IDEA(四) :Settings(上)
前言 IDEA是一个智能开发工具,每个开发者的使用习惯不同,如何个性化自己的IDEA?我们可以通过Settings功能来设置.Settings文件是IDEA的配置文件,通过他可以设置主题,项目,插件, ...
- MangoDB高级应用
MongoDB高级应用 Author:SimpleWu 聚合 聚合(aggregate)主要用于处理数据(诸如统计平均值,求和等),并返回计算后的数据结果.有点类似sql语句中的 count(*). ...
- Linux—vim常用命令
vim常用命令: 1. 键入i进入编辑模式2. esc进入命令模式3. a,进入编辑模式3. b,光标移动到单词前,end,光标移动到行尾4. home光标移动到行首5. cc,删除当前行,并进入编辑 ...
- C++入门之初话多态与虚函数
多态性是面向对象程序设计的又一个重要思想,关于多态的详尽描述,请看本人的收藏https://www.cnblogs.com/hust-ghtao/p/3512461.html.这篇博文中,详尽的探讨了 ...
- Python学习之赋值列表
# the program aim to differentiate the defference of a=b or a=b[:] my_fruits=["apple",&quo ...
- openstack-KVM-vCPU
一.KVM基础功能 (1)支持 硬件支持 VT-x VT-d 系统支持 kernel > 3.5 (2)计算机系统的子系统 CPU 处理器 Memory 内存 Storage 存储 Networ ...
- java总结:字符串切割
java中String.split()用法 在java.lang包中有String.split()方法,返回是一个数组.1.“.”和“|”都是转义字符,必须得加"\\"; 所以如果 ...
- MYSQL业务数据简单脱敏方案
removesensitiveinformationplan.sh #!/bin/sh #!在模拟库上运行如下脚本 #!生产库crm-db #!模拟库crm-mock #!.备份生产库 mysqldu ...
- docker技术之安装
由于工作原因需要使用docker完成集群的搭建,特此记录一下研究的docker技术. 首先简单的介绍一下docker: Docker 使用 Google 公司推出的 Go 语言 进行开发实现,基于 L ...
- 什么是arp协议?
转自:https://blog.csdn.net/tigerjibo/article/details/7351992 ARP (Address Resolution Protocol) 是个地址解析协 ...