调整模态框居中

原创 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);
版权声明:本文为博主原创文章,未经博主允许不得转载。

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

原文出处:http://www.w3cfuns.com/notes/18019/54eda2ad873b00b0958746627731e2b6.html (有Demo) de...
  • chelen_jak
  • chelen_jak
  • 2016年10月21日 14:20
  • 989

Bootstrap Modal 上下左右居中 完美解决方案

解决bootstrap modal 居中问题
  • TLD_DLT
  • TLD_DLT
  • 2015年12月11日 17:23
  • 16141

Bootstrap modal 模态框垂直居中

最近在使用Bootstrap框架,框架本身自带有一个modal模态框,也就是我们平时常叫的弹窗。但是这个模态框有一个特点,就是它本身是不会垂直居中的,默认只是距离顶部30px。那有没有办法让模态框垂直...
  • Lancelot_Lewis
  • Lancelot_Lewis
  • 2015年12月18日 13:22
  • 4696

bootstrap 模态框(modal)实现水平垂直居中显示 含具体分析

欢迎来到Altaba的博客  2017年1月22日        众所周知,bootstrap是一款非常实用的CSS框架(主要用于样式的快速搭建),由于其简洁,美观,快捷,响应式等特点备受大家喜欢,但...
  • Altaba
  • Altaba
  • 2017年01月22日 17:10
  • 12904

bootstrap模态框(modal)垂直居中

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

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

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

bootstrap modal 垂直居中对齐

bootstrap modal 垂直居中对齐   文章参考 http://www.bubuko.com/infodetail-666582.html http://v3...
  • yucaifu1989
  • yucaifu1989
  • 2016年05月16日 15:55
  • 11806

Bootstrap模态框水平垂直居中

找了好久, 一直没找到使用纯css的方法, 下面是结合css和js的方法, 欢迎提出更好的方法.css如下: /* 覆写自带的样式 */ .modal-dialog { position: a...
  • butterfly5211314
  • butterfly5211314
  • 2017年04月22日 11:46
  • 250

bootstrap modal弹出框的垂直居中

bootstrap modal弹出框的垂直居中本人前端小菜鸡一只,公司项目尝试采用bootstrap,我身先士卒为同事趟“坑”,无奈UI妹子刁难非得让modal弹出框垂直居中,为了前端开发岗位的荣誉,...
  • baidu_35407267
  • baidu_35407267
  • 2016年06月23日 22:49
  • 1050

[js学习笔记]bootstrap中模态对话框水平垂直居中

bootstrap中模态对话框水平垂直居中
  • xiangcns
  • xiangcns
  • 2016年12月21日 16:49
  • 1469
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:调整模态框居中
举报原因:
原因补充:

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