堆棧內存溢出
  簡體   English   中英

放大或縮小時無法使窗口停留在網站中間

[英]Cant make window stay in the middle of the website when i zoom in or out

 原文  2020-03-30 01:07:55  8   1    javascript/ html/ css

問題描述

我不能讓我創建的窗口停留在網站的中間。 我發現使用position: fixed和top: 50%; left:50% top: 50%; left:50%有效，但問題是為了使窗口在 100% 縮放時正好位於頁面的中間，我需要將左值和上值設置為 30%，我想知道如何解決這個問題。 這是代碼：

           <body>
<div class="container">
    <div class="window" id="win">
        <div class="layover">
            <div class="h2">
            <h2>Oops!</h2>
            </div>
             <div class="yesandno">
                 <figure class="yes">
                     <button onclick="window.location.href= 'espanol.html';">Si</button>
                 </figure>
                 <figure class="no">
                     <button onclick id="buttonn">No</button>
                </figure>
             </div>
        <div class= "langmessage">
        Hemos detectado que el idioma de su ordenador se encuentra en español. ¿Le gustaría utilizar la versión en español de nuestro sitio web?
        </div>
        </div>

    <script type="text/javascript">
      var lang= navigator.language;
      if (""+ lang == "es-US") {
           var div= document.getElementById("win");
     }
     var button= document.getElementById("buttonn")
     buttonn.onclick= function(){
        var div = document.getElementById("win");
if (div.style.display !== "none") {
    div.style.display = "none";
         }
       }
        </script>
        </div>

塊引用

.window{
    position: fixed;
    border-width: 0px;
    top: 30%;
    left: 30%;
    padding: 0px;
    background: url(images/blue-abstract-noise-free-website-background-image.jpg);
    border-radius: 12px;
    width: 476px;
    height: 276px;
    opacity: 1;
    z-index: 1;
    box-shadow: 2px 1px 2.82px 1.8px rgba(209, 55, 55, 0.486), 0px 3px 5.88px 0.12px rgba(211, 49, 49, 0.514);
}
.layover{
    background-color: rgba(100, 99, 92, 0.699);
    position: absolute;
    right: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    border-radius: 12px;
}    
.h2{
    position: absolute;
    left: 12px;
    font-weight: 900;
    font-size: 20px;
    color: white;
    font-family: sans-serif;
}
.yesandno{
    height: 80px;
    width: 250px;
    position: absolute;
    top: 200px;
    left: 217px;

}
.yes{
    display: inline-block;
    position: absolute;
    height: 30px;
    width: 80px;
    margin: 0px;
    left: 100px;

}
.yes > button{
    display: block;
    cursor: pointer;
    margin: 0px;
    padding: 0px;
    border: 0px;
    border-radius: 8px;
    height: 100%;
    width: 100%;
    color: white;
    font-weight: 900;
    font-size: 13px;
    font-family: sans-serif;
    opacity: 1;
    z-index: 2;
    background-color: rgba(129, 127, 127, 0.808);
}
.no{
    display: inline-block;
    position: absolute;
    height: 30px;
    width: 80px;
    margin: 0px;
    right: 300px;
}
.no > button{
    display: block;
    cursor: pointer;
    margin: 0px;
    padding: 0px;
    border: 0px;
    border-radius: 8px;
    height: 100%;
    width: 100%;
    color: white;
    font-weight: 900;
    font-size: 13px;
    font-family: sans-serif;
    opacity: 1;
    z-index: 2;
    background-color: rgba(129, 127, 127, 0.808);
}
.langmessage{
    position: absolute;
    top: 80px;
    text-align: center;
    font-weight: 900;
    font-size: 13px;
    font-family: sans-serif;
    color: white;
    left: 10px;
    right: 10px;
}

1 個解決方案

解決方案1
 1 已采納  2020-03-30 01:19:50

  .window{
    background: url(images/blue-abstract-noise-free-website-background-image.jpg);
    border-radius: 12px;

    opacity: 1;
    z-index: 1;
    box-shadow: 2px 1px 2.82px 1.8px rgba(209, 55, 55, 0.486), 0px 3px 5.88px 0.12px rgba(211, 49, 49, 0.514);


    width: 476px;
    height: 276px;
    background-color: blue;

    position:absolute; /*it can be fixed too*/
    left:0; right:0;
    top:0; bottom:0;
    margin:auto;

    /*this to solve "the content will not be cut when the window is smaller than the content": */
    max-width:100%;
    max-height:100%;

}

將此用於您的 .window 類

結果： 

 .window{ background: url(images/blue-abstract-noise-free-website-background-image.jpg); border-radius: 12px; opacity: 1; z-index: 1; box-shadow: 2px 1px 2.82px 1.8px rgba(209, 55, 55, 0.486), 0px 3px 5.88px 0.12px rgba(211, 49, 49, 0.514); width: 476px; height: 276px; background-color: blue; position:absolute; /*it can be fixed too*/ left:0; right:0; top:0; bottom:0; margin:auto; /*this to solve "the content will not be cut when the window is smaller than the content": */ max-width:100%; max-height:100%; } .layover{ background-color: rgba(100, 99, 92, 0.699); position: absolute; right: 0px; top: 0px; width: 100%; height: 100%; border-radius: 12px; } .h2{ position: absolute; left: 12px; font-weight: 900; font-size: 20px; color: white; font-family: sans-serif; } .yesandno{ height: 80px; width: 250px; position: absolute; top: 200px; left: 217px; } .yes{ display: inline-block; position: absolute; height: 30px; width: 80px; margin: 0px; left: 100px; } .yes > button{ display: block; cursor: pointer; margin: 0px; padding: 0px; border: 0px; border-radius: 8px; height: 100%; width: 100%; color: white; font-weight: 900; font-size: 13px; font-family: sans-serif; opacity: 1; z-index: 2; background-color: rgba(129, 127, 127, 0.808); } .no{ display: inline-block; position: absolute; height: 30px; width: 80px; margin: 0px; right: 300px; } .no > button{ display: block; cursor: pointer; margin: 0px; padding: 0px; border: 0px; border-radius: 8px; height: 100%; width: 100%; color: white; font-weight: 900; font-size: 13px; font-family: sans-serif; opacity: 1; z-index: 2; background-color: rgba(129, 127, 127, 0.808); } .langmessage{ position: absolute; top: 80px; text-align: center; font-weight: 900; font-size: 13px; font-family: sans-serif; color: white; left: 10px; right: 10px; }
 <body> <div class="container"> <div class="window" id="win"> <div class="layover"> <div class="h2"> <h2>Oops!</h2> </div> <div class="yesandno"> <figure class="yes"> <button onclick="window.location.href= 'espanol.html';">Si</button> </figure> <figure class="no"> <button onclick id="buttonn">No</button> </figure> </div> <div class= "langmessage"> Hemos detectado que el idioma de su ordenador se encuentra en español. ¿Le gustaría utilizar la versión en español de nuestro sitio web? </div> </div> <script type="text/javascript"> var lang= navigator.language; if (""+ lang == "es-US") { var div= document.getElementById("win"); } var button= document.getElementById("buttonn") buttonn.onclick= function(){ var div = document.getElementById("win"); if (div.style.display !== "none") { div.style.display = "none"; } } </script> </div> </div>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 調整窗口大小后如何使我的網站停留 當我縮小網站時，我的頁腳不會停留在網站的底部 使菜單停留在頂部，但在向下滾動以進行側向滾動網站時則不會 無法放大和縮小谷歌地圖 如何使用jQuery或CSS縮小整個網站？ 如何在不影響部分的情況下放大/縮小我的網站 我想滾動放大和縮小圖像，但該圖像上的針腳仍保持正確的位置。 jQuery的 HTML 元素在我放大/縮小時移動 當我選擇留在頁面上時，window.onbeforeunload不起作用 當將鼠標放在圖像的特定區域上時，我無法弄清楚如何使mouseOver變得模糊
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM