调整模态框居中

原创 2017年01月03日 13:33:45
/* 调整模态框居中 */
/**
* 使页面中所有.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()) / 2);
    top = top > 50 ? top : 0;
    $clone.remove();
    $(this).find('.modal-content').css("margin-top", top-50);
  });
}
// 在模态框出现的时候调用垂直居中函数
$('.modal').on('show.bs.modal', centerModals);
// 在窗口大小改变的时候调用垂直居中函数
$(window).on('resize', centerModals);
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

HashMap的工作原理

HashMap的工作原理是近年来常见的Java面试题。几乎每个Java程序员都知道HashMap,都知道哪里要用HashMap,知道Hashtable和HashMap之间的区别,那么为何这道面试题如此...

单点登录的原理和简单实现

一、单系统登录机制 1、http无状态协议 web应用采用browser/server架构,http作为通信协议。http是无状态协议,浏览器的每一次请求,服务器会独立处理,不与之前或之后...

bootstrap模态框(modal)垂直居中

相信modal垂直居中的问题,大家都百度、谷歌过,或者自己研究过。modal框默认是在屏幕上方左右居中显示,但是有的人偏偏去搞成上下左右都居中,大屏幕好像没问题,但是移动端就会导致modal框变形。所...

Bootstrap模态框如何垂直居中?

先上效果图 就是一个点击弹窗先上jquery代码 //模态框垂直居中 function centerModals() { $('.modal').each( ...

css就可以让模态框内容盒子水平上下居中

原文出处:http://www.w3cfuns.com/notes/18019/54eda2ad873b00b0958746627731e2b6.html (有Demo) de...

BootStrap3.X模态框垂直居中显示

当点击按钮时modal的位置看起来很不舒服, 解决办法总结有两:   1.使用modal 弹出事件方法;    从官方文档中可以了解到, modal组件有不少事件接口: ...

Bootstrap模态框水平垂直居中与增加拖拽功能

最近开发一个CMS系统使用上了Bootstrap,在开发一个添加某些选项时,打算弹出一个模态框,但是发现,模态框不会垂直居中到屏幕上,而是在屏幕上方,找了好多资料都没搞定,最终自己试出了一种JS的方法...

超酷的模态框效果 - Nifty

  • 2015年08月10日 10:22
  • 49KB
  • 下载

【Visual Basic】列表控件ListView的增删改查、模态对话框、禁止窗口调整大小

列表控件ListView是窗体中核心组件之一,在各种窗体程序得到广泛应用。在《【mfc】学生信息管理,实现List控件节点的增删改查》(点击打开链接)中极其难以实现列表控件ListView的增删改查,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:调整模态框居中
举报原因:
原因补充:

(最多只允许输入30个字)