Question

我有一个让我疯狂的问题，它已经这么做了很长一段时间。我花了几天的时间试图弄清楚这个没有成功。谷歌对我来说基本上是紫色的。此外，我担心答案可能会令人尴尬 - 但我现在要淹死自己了，所以这里有：

问题：

我在我的网站上使用纯css模态窗口。它们被设置为绝对定位使用margin：0 auto;和translateY（-50％）;像这样：

margin: 0px auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

我正在使用命名锚来隐藏/显示模态窗口。

这基本上在每个浏览器中都能很好地工作 - 我在我的浏览器窗口的VIEWPORT中心看到了模态窗口的显示和消失。然而，在Safari和iPhone以及iPad上，似乎我的模态窗口相对于整个页面/文档绝对居中。

因此，如果我的页面有一个垂直滚动条，单击锚点链接并显示模态窗口也会使BROWSER WINDOW跳转 - 以便在整个页面的绝对中心显示模态窗口。

我在关闭的body标签之前包含我的模态窗口，如下所示：

<?php
include 'layout/elements/modal/users_online.php';
include 'layout/elements/modal/requests.php';
include 'layout/elements/modal/notifications.php';
include 'layout/elements/modal/messages.php';
include 'layout/elements/copyright.php';
include 'layout/elements/modal/developer.php';
?>
</body>
</html>

这是我的模态窗口的代码：

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 0;
    color: #333333;
}    

.modal:target {
    display: block;
    outline: none;
}

.modal .big_container {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    width: 785px;
    height: 515px;
    margin: 0px auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0px 1px 26px -3px #777;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
}

Answer 1

非常感谢 weBer （非常感谢你们：D）我能够找到答案。

这有效：

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.modal:target {
    display: block;
    outline: none;
}

.modal .big_container {
    position: fixed;
    display: block;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    min-width: 785px;
    max-width: 785px;
    min-height: 515px;
    max-height: 515px;
    margin: 0px auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0px 1px 26px -3px #777777;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
}

Answer 2

我不确定这是你的答案，但在这里。

将.modal作为弹出式叠加背景。所以将其代码更改为 -

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: #333333;
}

.modal .big_container - 我们的内容框应该具有以下样式。

.modal .big_container {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    width: 785px;
    height: 515px;
    display:inline-block;
    position:absolute;
    left:50%;
    top:50%;
    -webkit-transform: translateY(-50%,-50%);
    -ms-transform: translateY(-50%,-50%);
    transform: translateY(-50%,);
    padding: 20px;
    box-sizing:border-box;
    background-color: #ffffff;
    box-shadow: 0px 1px 26px -3px #777;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
}

检查它是否有效。我想这可能，我在大多数项目中使用它。

视口绝对中心的模态窗口| Safari和IOS问题

2 个答案: