DeniSShishkin
@DeniSShishkin
В данный момент живу на о. Самуи, познаю мир

Как закрыть pop up автоматически через n секунд?

Пытаюсь сделать так что бы после отправки контактной формы, появлялось всплывающее окно с уведомлением об успехе операции. Первую часть выполнить получилось таким кодом:
function slug_post_form_submit( obj ) {
    jQuery('#success-message').show();
}


Сам html код попапа:
<section id="success-message">
   <div class="popup"> <h2>Успешно!</h2>
   </div>
</div>


CSS примерно такой:
.popup {
    position: absolute;
    top: 27%;
    left: 0;
    right: 0;
    width: 490px;
    margin: auto;
    height: 366px;
    background: #fff;
}
#success-message {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.56);
    z-index: 999!important;
    background: rgba(40, 69, 113, 0.4);
}
#success-message {
    display: none;
}


После отправки попап появляется, все хорошо, но проблема в том что я не могу сделать так что бы он автоматом скрывался например через 2 секунды, и что бы человек нажав вне окна (на оверлей) так же мог закрыть этот попап.
Нашел в сети такой код, но может из-за того что не хватает знаний js не правильно его вставляю, так как ничего не работает
setTimeout(function() { $("#success-message").hide('slow'); }, 2000);


Прошу вашей помощи)
  • Вопрос задан
  • 3668 просмотров
Пригласить эксперта
Ответы на вопрос 5
ThunderCat
@ThunderCat Куратор тега CSS
{PHP, MySql, HTML, JS, CSS} developer
$("#success-message").hidefadeOut(2000);
Ответ написан
r0n1x
@r0n1x
Помогу с html, css, js
<body>
  <section id="successMessage">
    <div class="popup">
      <h2>Успешно!</h2>
    </div>
  </section>
  <script type="text/javascript" charset="utf-8">
    setTimeout(() => successMessage.hidden = true, 2000)
  </script>
</body>


link
Ответ написан
@lexstile
// 1
			jQuery('#success-message').show();
			setTimeout(function(){ jQuery('#success-message').hide(); }, 3500);
			// 2 этот не проверял, не могу сказать, будет ли работать
			jQuery('#success-message').show(0).delay(1000).hide(0);
Ответ написан
Комментировать
deniscopro
@deniscopro Куратор тега WordPress
WordPress-разработчик, denisco.pro
Так уже пробовали?
jQuery('#success-message').show('normal', function() {
    setTimeout(function() { jQuery("#success-message").hide('slow'); }, 2000);
});
Ответ написан
Комментировать
antbo
@antbo
с расстояния двадцати метров кажусь программистом
Следите за $ и jQuery в начале запросов. Старые версии не поддерживают формат $(“#div”).fadeOut(); , вместо jQuery(“#div”).fadeOut();
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы