Не могу сделать окно остаться в середине сайта, когда я увеличиваю или уменьшаю - PullRequest
Новая
       0

Не могу сделать окно остаться в середине сайта, когда я увеличиваю или уменьшаю

0 голосов
/ 30 марта 2020

Я не могу сделать созданное мной окно, оставаясь в середине сайта. Я обнаружил, что использование position: fixed и 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 голос
/ 30 марта 2020 
  .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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...