bootstrap Modal 模态框垂直居中
解决 Modal 垂直居中的问题,上网找了好多博客,有好多说改源码的,这个并没有实践。
但发现另一种解决办法,可以实现,代码如下:
function centerModals(){
$('.modal').each(function(i){
var $clone = $(this).clone().css('display', 'block').appendTo('body');
var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / );
console.log(top)
$clone.remove();
$(this).find('.modal-content').css("margin-top", top-);
});
}
在 Modal show的时候,回调这个函数
$('#tipModal').modal('show',centerModals());
在窗口变化的时候
$(window).on('resize', centerModals);
效果如下
也可以自己稍微调整下上下高度
bootstrap Modal 模态框垂直居中的更多相关文章
- Bootstrap modal 模态框垂直居中显示补丁
<script> $.fn.modal.Constructor.prototype.adjustDialog1 = function(){ var modalIsOverflowing = ...
- 重置 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)插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- Java内部类类型
可以在类中的任何位置定义内部类,并在其中编写Java语句.有三种类型的内部类. 内部类的类型取决于位置和声明的方式. 成员内部类 局部内部类 匿名内部类 成员内部类 成员内部类在类中声明的方式与声明成 ...
- yum update过程中失败后再次执行出现“xxxx is a duplicate with xxxx”问题
问题现象: 解决办法: 利用yum-uitls中的工具package-cleanup指令,使用方法见下图,具体可通过man package-cleanup查询 列出重复的rpm包 pac ...
- SpringMVC(IntelliJ IDEA)(详细操作)
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15.
- Arcpy里莫名其妙的字段类型(Field type)
对比6个常用的字段数据类型在Arcpy字段创建与字段属性输出时奇怪的事情: 添加字段使用arcpy.AddField_management: # addfield 的 type参数 # 浮点型,Flo ...
- SiteMesh 2.X 的使用(网页结构模板)
SiteMesh是基于Servlet的filter的,即过滤流.它是通过截取reponse,并进行装饰后再交付给客户. 其中涉及到两个名词: 装饰页面(decorator page)和 "被 ...
- shell变量的间接引用
- MATLAB生成exe脱离matlab运行可执行程序
https://blog.csdn.net/u013007900/article/details/53485204 侵权即删. ———————————————— 版权声明:本文为CSDN博主「小木匠_ ...
- python 数据的存储
数据的存储 思考:为什么使用计算机?存储数据,计算数据 思考:数据存在哪里?数据存储在内存里 思考:数据怎么在内存里存储的?首先弄明白怎么存储数字 1010.5“sunck is a good man ...
- 【JZOJ6434】【luoguP5665】【CSP-S2019】划分
description analysis 首先有一个结论,对于\([1,i]\)区间划分最后一段的和尽量小,答案会更优,具体证明参考毛爷爷的博客 设\(f[i]\)为满足\([1,i]\)划分最优时. ...
- 生产者消费者模式-->线程
#_author:来童星#date:2019/12/17#生产者消费者模式-->线程from queue import Queueimport random,time,threading#生产者 ...