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> ...
随机推荐
- STM32 系统架构
这里所讲的 STM32 系统架构主要针对的 STM32F103 这些非互联型芯片 STM32 主系统主要由四个驱动单元和四个被动单元构成. 四个驱动单元是: 内核 DCode 总线; 系统总线;通用 ...
- JS-JSDoc
http://usejsdoc.org/ 生成 JSDoc 格式的注释: sublime:安装 DocBlockr VSCode:自带 JSDoc 插件
- 动态规划及LCS
LCS的python实现: #!/usr/bin/env python #-*- coding: utf-8 -*- import sys reload(sys) sys.setdefaultenco ...
- Python List列表的操作说明
Python中List的N种操作,其简单程度令人叹为观止... C:\Users\rhys>python Python 2.7.14 (v2.7.14:84471935ed, Sep 16 20 ...
- Perceptron Algorithm 感知器算法及其实现
Rosenblatt于1958年发布的感知器算法,算是机器学习鼻祖级别的算法.其算法着眼于最简单的情况,即使用单个神经元.单层网络进行监督学习(目标结果已知),并且输入数据线性可分.我们可以用该算法来 ...
- python学习笔记:python简介和入门
编程语言各有千秋.C语言适合开发那些追求运行速度.充分发挥硬件性能的程序.而Python是用来编写应用程序的高级编程语言. Python就为我们提供了非常完善的基础代码库,覆盖了网络.文件.GUI.数 ...
- HTTP 请求及响应 (转)
HTTP请求 4.1.HTTP请求包括的内容 客户端连上服务器后,向服务器请求某个web资源,称之为客户端向服务器发送了一个HTTP请求. 一个完整的HTTP请求包括如下内容:一个请求行.若干消息头. ...
- os.walk|图片数据集
该函数的功能:遍历指定文件夹下的所有[路径][文件夹][文件名] ''' os.walk(top[, topdown=True[, onerror=None[, followlinks=False]] ...
- Django框架(三十)—— 使用Vue搭建前台
目录 vue的使用 一.创建vue项目 二.pycharm开发vue项目 1.安装vue.js插件 2.运行vue项目 三.vue项目的目录结构 四.vue的使用 1.创建新的组件 2.显示数据 3. ...
- Django框架(十六)—— cookie和session组件
目录 cookie和session组件 一.cookie 1.cookie的由来 2.什么是cookie 3.cookie的原理 4.cookie的覆盖 5.在浏览器中查看cookie 6.cooki ...