視口絕對中心處的模式窗口| Safari和IOS問題

Question

我遇到了一個令我瘋狂的問題，它已經這麼做了很長時間了。我花了好幾天的時間試圖找出這一個沒有成功。現在Google對我來說基本上是紫色的。此外，我擔心，答案可能是令人尷尬的容易 - 但我即將去所以這裏淹死自己所說：

問題：

我用純CSS模式窗口在我的網站。它們被設置爲使用邊距絕對定位：0 auto;並翻譯Y（-50％）;像這樣：

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

我使用命名的錨來隱藏/顯示模態窗口。

這在基本上每個瀏覽器都很精美 - 我的模式窗口在我的瀏覽器窗口的VIEWPORT的中心顯示和消失，就像它們應該顯示的那樣。然而，在Safari和iPhone和iPad上，似乎我的模式窗口相對於整個頁面/文檔完全居中。因此，如果我的頁面有一個垂直滾動條，單擊錨點鏈接並顯示模式窗口，BROWSER WINDOW也會跳轉 - 以便在整個頁面的絕對中心顯示模式窗口。

我包括我的模態窗口之前的結束標記，像這樣：

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

檢查它是否適用。我想這可能是我在大多數項目中使用的。