Во флексбоксе спрятано, как на дисплее: нет, а затем покажите его позже - PullRequest
Новая
       2

Во флексбоксе спрятано, как на дисплее: нет, а затем покажите его позже

1 голос
/ 13 января 2020

Моя проблема в том, что у меня есть flexbox 

<style>
  .popup {
    height:50%;
    width:50%;
    background-color: rgba(99,148,236,0.7);
    border: 2px solid white;
    border-radius: 5vw;
display:flex;
flex-direction:column;
align-content: space-evenly;
    }
    .popup svg line {
    stroke-width: 2;
    stroke: white;
    fill: none;
}
</style>
<html>
<span id='save_popup'>
<span style='display:flex;flex-direction:row;align-items:center;z-index:22;width:100%;height:100%;'>
<span style='display:flex;flex-direction:column;justify-content: center;align-items:center;z-index:22;width:100%;height:100%;'>
 <span class='popup' style='z-index:22;'>
    <svg id='close_popup' xmlns="http://www.w3.org/2000/svg" width="2vw" height="2vw" style='z-index:23;position:relative;margin-top:4vh;margin-left:90%;'>
    <line class="a" x1="0" y1="1vw" x2="1vw" y2="0"></line>
    <line class="b" x1="1vw" y1="1vw" x2="-1vw" y2="-1vw"></line>
    </svg>
    <p id='savings_popup_p1' style='font-size:3vw;margin:auto;'>You Saved</p>
    <p id='savings_popup_p2' style='margin:auto;font-family:roboto;max-width:55%;'></p>
    <p id='savings_popup_p3' style='margin:auto;font-family:roboto;max-width:55%;0.9em;'></p>
    <p id='savings_popup_p4' style='margin:auto;font-family:roboto;font-size:0.9em;'>*This is a preliminary estimate, please contact us to discuss more</p>
 </span>
</span>
</span>
</span>
</html>

Я хочу, чтобы он был скрыт, но видимость: скрыта; означает, что он все еще портит положение остальной части страницы, когда появляется предварительный загрузчик: 

<div id='preloader_cover' style='display:flex;flex-direction:column;background-color:black;width:100%;height:100%;z-index:1000;'>
 <div id='preloader_circle' style='display:inherit;border-radius:50%;border:3px solid white;margin:auto;width:18vw;height:18vw;
 background-color:cornflowerblue;'>
    <img id='preloader_logo' src='logo.png' style='margin:auto;width:10vw;height:10vw;'/>
 </div>
 <p id='preloader_p' style='margin: 10vh auto;font-size:4vh;font-family:Montserrat;color:white;'>Loading assets..</p>
 <progress id='preloader_prog' max='100' value='10' style='margin: 5vh auto;height:2vh;width:60%;border-radius:0.8vh;color:white;background-color:background-color:rgba(99,148,236,0.7);
 gray;opacity:0.9;'></progress>

</div>

, используя .hide () и .show (), работают одинаково за кулисами, и я не могу используйте обычный дисплей: блокируйте по другим причинам.

используя дисплей: нет; в стиле, то 

 $('#save_popup').css('display','flex');

тоже не работает, мне нужно, чтобы это работало так, как вы ожидаете, ie, прелоадер покрывает весь экран, css действует как всплывающее окно не на странице вообще, не просто скрыт.

, но с возможностью его переключения на экран, любая помощь приветствуется.

1 Ответ

1 голос
/ 13 января 2020

Этот кодовый блок отвечает на ваш вопрос? 

<style>
.hidden {
  display: none;
}

nav {
  display: flex;
}

nav div {
}


</style>
<script>
var textFieldVisible = true;

document.querySelector('button').addEventListener('click', function() {

  $('input').toggleClass('hidden');

});
</script>
<html>
<nav>
  <div>
    <span>Item 1</span>
  </div>
  <button>Click it</button>
  <input value="Potato brains"/>
  <div>
    <span>Item 2</span>
  </div>
</nav>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...