javascript - Bootstrap中弹出层居中显示问题
高洛峰
高洛峰 2017-04-10 15:44:43
[JavaScript讨论组]

今天在用Bootstrap做页面的时候,遇到一个问题是,点击头部的登录注册链接,弹出层显示注册登录框.默认的情况下面弹出层是偏上显示,我自己想让弹出层居中显示,(无论屏幕多大,始终居中显示),使用以前的方法做法是获取到屏幕可视区的宽度和高度后减去弹出层内容的宽度和高度,除以2即可,然后用jquery进行设置css样式即可.例如:
demo 测试地址:http://demo.901web.com/tpcmstpl/

var left = ($(window).width()-600)/2;
var top = ($(window).height()-$(".modal-content").height())/2;
$("#pop-modal").css({"top":top,"left":left});

这样做却还是没有效果.于是上网查找了相关的资料.结果搜索到一篇文章:
链接地址为:http://www.cnblogs.com/ZHF/p/3739022.html

按照文章中的做法测试了下,修改了Bootstrap默认的js文件.结果是可以弹出弹出层的宽度,而高度却一直为0,不自动是什么情况.在Bootstrap的960行添加如下代码:

 alert(that.$element.children().eq(0).height());
 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";
          }
      });

希望知道的大神能够解释下,或者告诉我问题出现在哪里.谢谢.

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(1)
ringa_lee

bootstrap没认真学过,不太了解
看你的需求是弹出框要在任意宽高的浏览器窗口里都可以居中是吗?
你这样试试:

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号