为了账号安全,请及时绑定邮箱和手机立即绑定

中心弹出固定对齐仅适用于移动视图

中心弹出固定对齐仅适用于移动视图

一只斗牛犬 2023-06-29 22:43:07
当用户单击进行购买时,会出现一个弹出窗口,如下图所示,但我希望它居中......在移动版本上它可以工作,所以我不确定我错过了什么。我尝试检查该页面,但没有成功。任何帮助,将不胜感激。  .popUpBox {    width: 350px;    background: white;    text-align: center;    border: 1px solid gray;    padding: 20px;    position: fixed;    top: 50%;    z-index: 999999;    line-height: 3;    left: 50%;    transform: translate(-50%, -50%);    display: none;}
查看完整描述

2 回答

?
LEATH

TA贡献1936条经验 获得超6个赞

父 div 之一.page-container具有以下 CSS :transform: translate3d(0, 0, 0);

这完全搞乱了position:fixed,您的弹出窗口开始随页面滚动。

在父级上删除transform: translate3d(0, 0, 0);,弹出窗口将正常运行。


查看完整回答
反对 回复 2023-06-29
?
幕布斯7119047

TA贡献1794条经验 获得超8个赞

移至div.popupBoxCon父级 div 之外并将其作为主体中的第一个子级。


给出绝对位置,它将始终位于所有设备尺寸的中心。


.popupBoxCon{

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    z-index: 10;

}

<body>

  <div class="popupBoxCon"></div>

 </body>


查看完整回答
反对 回复 2023-06-29
  • 2 回答
  • 0 关注
  • 97 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信