Как я могу сделать так, чтобы мое всплывающее окно отображалось плавно через 5 секунд?

#javascript #html #css #popup

#javascript #HTML #css #всплывающее

Вопрос:

Всплывающее окно должно появиться и плавно охватить весь экран через 5 секунд с использованием свойства перехода CSS3 и непрозрачности, однако оно появляется все сразу.

JSFiddle:https://jsfiddle.net/dnvk87xL /

 var element = document.getElementById("popup");

var t=setTimeout(openPopUp,5000);
function openPopUp() {
  element = document.getElementById("popup");
  element.style.display = "block";
  element.style.opacity = "1";
}

 #popup{
  position: fixed;
  height:100%;
  background-color: green;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.7s;
  transition: opacity 0.7s;
}

 <div>
  <div id="popup">
    I'm gonna appear smoothly after 5 seconds
  </div>
  <p> Website content </p>
</div>

Ответ №1:

«Display» не является анимируемым свойством CSS. Вместо этого попробуйте использовать «Видимость».

 var element = document.getElementById("popup");

var t=setTimeout(openPopUp,5000);
function openPopUp() {
  element = document.getElementById("popup");
  element.style.visibility = "visible";
  element.style.opacity = "1";
}

 #popup{
  position: fixed;
  height:100%;
  background-color: green;
  display: block;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.7s;
  transition: opacity 0.7s;
}

 <div>
  <div id="popup">
    I'm gonna appear smoothly after 5 seconds
  </div>
  <p> Website content </p>
</div>

Ответ №2:

Почему вы не установили display: block; с самого начала? Добавьте z-индекс, чтобы переместить его в фоновый режим, а затем измените его. Проверьте это:

 var element = document.getElementById("popup");

var t=setTimeout(openPopUp,5000);
function openPopUp() {
  element = document.getElementById("popup");
  element.style.opacity = "1";
  element.style.zIndex  = "1";
}

 #popup{
  position: fixed;
  height:100%;
  background-color: green;
  display: block;
  opacity: 0;
  -webkit-transition: opacity 0.7s;
  transition: opacity 0.7s;
  z-index:-1;
}

 <div>
  <div id="popup">
    I'm gonna appear smoothly after 5 seconds
  </div>
  <p> Website content </p>
</div>

1. Это устраняет анимацию, но содержимое веб-страницы с самого начала закрывается невидимым всплывающим окном. Вы не можете выделить текст «Содержимое веб-сайта», и если бы там была какая-то кнопка или ссылка, на нее нельзя было бы кликнуть…

2. @Ondra Koupil, это верно. Я обновил свой ответ исправлением (используя z-index), чтобы избежать подобных проблем.

3. Мне следовало указать это, когда я задавал вопрос, но это сделало бы мой веб-сайт бесполезным на 5 секунд из-за 0 непрозрачности div, из-за чего пользователь не мог щелкнуть по содержимому.

Ответ №3:

Вы можете использовать функцию jQuery FadeIn в своем setTimeout

 var timer = setTimeout(function(){
    element.FadeIn('slow');
}, 5000);