微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Bootstrap模态框(modal)垂直居中的实例代码

Bootstrap官网下载:

  今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal)。

  刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用认的方式一直用着。最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去。

  因为之前对Bootstrap也不是很熟悉,便开始baidu、google,发现只有很少的解决方案,如下:

rush:js;"> $("#myModal").modal().css({ "margin-top": function () { return - ($(this).height() / 2); } });

  参考地址:http://www.g2w.me/2012/06/bootstrap-modal-shown-in-the-center/  

  这种方法自己试了一下,并不能完全居中,并且窗口的大小不一样的话,每次显示的margin-top值也会改变,遮盖层还会出现滚动条,效果也不好看。

  自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$(this).height())/2,发现还是不可行。

  最终只能研究一下源码了,发现可以在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中。

rush:js;"> that.$element.children().eq(0).css("position","absolute").css({ "margin":"0px","top": function () { return (that.$element.height() - that.$element.children().eq(0).height()-40) / 2 + "px"; },"left": function () { return (that.$element.width() - that.$element.children().eq(0).width()) / 2 + "px"; } });

  页面代码如下:

rush:js;">

 效果图如下:

以上所述是小编给大家介绍的Bootstrap模态框(modal)垂直居中的实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐