javascript - 移动设备上的弹出 div 不在屏幕中间

Question

我有两个 div

<div class="one">contains a massive image with fixed height and width</div>
<div class="two">contains popup</div>

.one {
        background-image: url("image");
        background-position: left top; 
        background-repeat: no-repeat;
        background-color: transparent;

        height:900px;
        width:1000px;

        margin:0 auto;
}

.overlay {
    background:rgba(0,0,0,0.8);
    bottom:0;
    left:0;
    position:fixed;
    right:0;
    top:0;
    z-index:4;
    display: block;
    opacity: 1;

    }

    .popupwrapper{
        background:white;
        height: 100%;
        max-width: 300px;
        width: 100%;
        max-height: 320px;
        text-align: center;
        padding:3em;
        margin: 0 auto;
        margin-top: 120px;

        //for small screens
        margin-left: 40px;  
    }

我遇到的问题是，由于当我在手机上查看时，div“one”是固定大小的，因此弹出窗口实际上并未显示在屏幕中央，而是如何显示在手机上笔记本电脑屏幕。我尝试使用小屏幕上的剩余边距来修复此问题，该边距将 div 置于移动屏幕的中间。然而，当我滚动时，因为 div 有一个 margin-left，所以当我滚动时它不会位于中心。

此外，这似乎只发生在 Safari 中(没有 margin-left 或固定最大宽度，div 在移动屏幕上似乎很大)，但在 Chrome 中没问题？

两个问题:

1. 如何阻止 div 滚动？我尝试过溢出，但它仍然滚动。
2. 是否有仅适用于 Safari 的 CSS hack？我尝试了很多，但似乎都不起作用？

Answer 1

我从你的问题中了解到，你想要显示一个始终位于屏幕中间和其余部分之上的叠加层。

如果模态框的大小是固定的，那么你可以这样做:

.one {
  position: absolute;
  top: 50%;
  left: 50%;

  margin: -450px 0 0 -500px;

  width: 1000px;
  height: 900px;
}

示例:click

只有覆盖层的尺寸对于移动设备来说太大了。也许使用媒体查询在移动屏幕上具有不同的尺寸？