bootstrap 3.3 模态框垂直居中问题
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计.Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计.Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
用过Bootstrap的童鞋有时候都会遇到一个问题,关于模态窗口,总是从上面slide下来,位置并不居中,在网上找了一些方式,例如弹出窗口后修改css,可以实现,还可以通过修改原生bootstrap.js 文件来调整下拉模态窗口的位置,下面介绍一种简单移动的方式,让模态窗口在屏幕上居中显示:
/* center 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 > 0 ? top : 0; $clone.remove(); $(this).find('.modal-content').css("margin-top", top); }); } $('.modal').on('show.bs.modal', centerModals); $(window).on('resize', centerModals);
很赞哦! ( 0
)
相关文章
- 视频:Windows 安装FTP服务 (基于Windows2008 IIS配置FTP站点 )
- 屌丝为什么找不到女朋友
- nodejs 利用GraphicsMagick和gm组件创建图片缩略图
- 马云终于离职了,最后他说了什么?
- jquery 对 Json 的各种遍历
- 麦本本,是什么本本?
- nodeJs基础教程系列(5)——异步与同步
- 怎样成长为一个优秀的 Web 前端开发工程师?
- 我用的一些Node.js开发工具、开发包、框架等总结
- nodeJs基础教程系列(2)——版本管理工具
- [转]有关网页渲染,每个前端开发者都该知道的那点事
- node.js 操作MongoDB 根据条件 随机取记录,怎么做?