Как я могу сделать этот всплывающий автомат c? - PullRequest
Новая
       47

Как я могу сделать этот всплывающий автомат c?

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

Мой код 

function PopUp() {
  document.getElementById('ac-wrapper').style.display = "none";
}
#ac-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .6);
  z-index: 1001;
}

#popup {
  width: 555px;
  height: 375px;
  background: #FFFFFF;
  border: 5px solid #000;
  border-radius: 25px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  box-shadow: #64686e 0px 0px 3px 3px;
  -moz-box-shadow: #64686e 0px 0px 3px 3px;
  -webkit-box-shadow: #64686e 0px 0px 3px 3px;
  position: relative;
  top: 150px;
  left: 375px;
}
<div id="ac-wrapper">
  <div id="popup">
    <center>
      <h2>Popup Content Here</h2> <input type="submit" name="submit" value="Submit" onClick="PopUp()" />
    </center>
  </div>
</div>

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

Ответы [ 2 ]

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

Вы можете достичь этого с помощью Javascript или CSS с битом JS, чтобы добавить класс по событию щелчка во всплывающем окне закрытия. 

//JS

setTimeout(function(){ 
  document.getElementById('ac-wrapper').style.display = 'block';
}, 5000);

//CSS
div {
  opacity: 0;
  pointer-events: none;
  animation-name: showPopup;
  animation-delay: 5s;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

@keyframes mymove {
  from {
   opacity: 0;
   pointer-events: none;
  }
  to {
   opacity: 1;
   pointer-events: auto;
  }
}

div.hidden {
  display: none;
  pointer-events: none; // just to be sure
}
0 голосов
/ 31 марта 2020

Во-первых, не публиковать код в комментариях, публиковать его в исходном вопросе.

Во-вторых, вы можете выполнить функцию (т. Е. «Automati c», так как ввод пользователя не требуется), путем просто вызывая его, PopUp().

В-третьих, чтобы добавить задержку, есть функция setTimeout(func, delay).

В-четвертых, придерживайтесь общих рекомендаций по стилю. Например,

  • одинарные кавычки ' вместо ", когда это возможно в JS;
  • имена функций в нижнем регистре popUp;
  • пробел перед фигурными скобками в забавных c определениях;
  • не настраивайте стиль непосредственно в JS, вместо этого переключайте класс . 
  function popUp() {
    document.getElementById('ac-wrapper').style.display = 'none';
    // document.getElementById('ac-wrapper').classList.toggle('hidden');
  }
  setTimeout(popUp, 5000);
...