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

时间:2017-09-02 10:10:10

标签: css

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

问题:

我在我的网站上使用纯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;
}

2 个答案:

答案 0 :(得分:2)

非常感谢 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;
}

答案 1 :(得分:1)

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

.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;
}

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