Как закрыть автоматически модальное окно с анимацией?

Question

[Антон]

вот код

<script type="text/javascript">
		$(window).load(function() {
		$("#likes").delay(4500).fadeOut(500);
		})
		</script>

но он работает только до того как загрузиться body, мне надо что бы просто в любой момент жмешь кнопку в моем случаи "Мне нравиться" вылезает окно, оно должно через какое время закрыться само, при этом с анимацией, код работает но только если нажать на кнопку до того как загрузиться весь body, а мне надо что бы после загрузки body все это работало, в JS не силен, увы...
help please)

Answer 1

[Александр Серяков]

Набросал пример, если правильно понял https://jsfiddle.net/ruzqg3nL/10/
нужно подключение jquery

Comments

[Антон]

Спасибо! очень помог! Но почему то не работает с анимациями другими, только с fade :(

[Александр Серяков]

в jquery только 2 стандартных анимации fadeIn(), fadeOut() и slideUp(), slideDown(), так же есть методы show() и hide() все остальные эффекты нужно реализовывать вручную, например через css

[Антон]

Александр Серяков: Я использую Animate.css каким образом можно подключить его ?

Еще если не сложно не помешала бы помощь с тем же самым, только окно надо закрывать не автоматом а по кнопке..

[Александр Серяков]

Доработал, теперь закрывается на кнопку и можно использовать анимации от animateCSS https://jsfiddle.net/ruzqg3nL/17/

[Антон]

Александр Серяков: Спасибо все ок, но проблема в том что когда он открывает окно открывается не сам блок, а еще и затемнение вокруг него и получается анимация открывает и блок и затемнение и выглядит это не ахти(

[Александр Серяков]

я не вижу как именно реализовано в коде, примерно можно реализовать так https://jsfiddle.net/ruzqg3nL/19/

[Антон]

Александр Серяков: Не особо помогло, в итоге накладывается одно затемнение на другое, а если убрать из кода то вообще затемнение есть а блока нет

[Александр Серяков]

чтобы использовать мой последний вариант, нужно удалить затемнение, которое было до этого, или показать кусок кода с логикой работы этого затемнения

[Антон]

Александр Серяков: вот
.popup_thanks{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 100;
color: #333;
}

[Александр Серяков]

тогда нужно заменить переменную bg = $('.popup_thanks'), // затемнение
https://jsfiddle.net/alexndb/ruzqg3nL/20/

[Антон]

Александр Серяков: Я заменял толку 0, еще одна просьба по JS,
В общем открывается модальное окно, заполняешь поля , надо что бы после нажатия "Отправить" открывалось следующее модальное окно типо "спасибо за заказ" при этом данные должны отправиться по почте, ну php я сам разберусь, мне главное с js это реализовать)

[Александр Серяков]

я дал множество вариантов реализаций, на основе их можно сделать абсолютно любой попап, полностью делать и разбираться дальше придется самому, а вообще попапы лучше реализовать плагином dimsemenov.com/plugins/magnific-popup очень удобный и универсальный плагин с множеством настроек и подробной документацией

[Антон]

Александр Серяков: понял, спасибо

[Антон]

Александр Серяков: Можете подсказать, в JS никак нельзя сделать проверку ? просто я сделал что бы из одного модального окна открывалось другое, но проблема в том, что если нажать на кнопку "Отправить" то открывается окно но мне надо что бы оно открывалось только после того как все поля заполнит пользователь в html стоит required.

[Александр Серяков]

https://jsfiddle.net/alexndb/nhseytd4/ примерно так, тут проверяется каждое поле на пустоту и если оно пустое - ему задается класс с ошибкой, если заполнить - удаляется, после того как не останется ни 1 класса с ошибкой - форма отправится и можно открыть попап спасибо в том месте где написал комментарий

[Антон]

Александр Серяков: Какой JS сложный, честно говоря ничего не понял...
Заранее спасибо вам)
Открывается из этого

<div id="svyaz" class="popup_form" tabindex="-1" role="dialog">
			
			<div class="popup_form_inner animated flipInY">
								<button class="close" type="button" data-dismiss="modal"><img src="/portfolio/img/krest.png" alt=""></button>
								<div class="popup_form_title">Связаться с нами</div>
								<form method="post">
									<div class="form1">
									<div class="field"><div class="field_title">Введите Имя</div><div class="field_description"></div><div class="field_input"><input type="text" name="svyazfio"pattern="\D{1,128}"title="Формат: Имя"required></div></div>
									
									<div class="field"><div class="field_title">Введите E-mail</div><div class="field_description"></div><div class="field_input"><input type="text" name="svyazemail" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" title="Пример почты: [e-mail]" required></div></div>
									
									<div class="field"><div class="field_title">Комментарий</div><div class="field_description"></div><div class="field_input"><textarea name="svyazcomment" required></textarea></div></div>
									
									<div class="field"><div class="field_input"><div class="kg"><input type="submit" value="Отправить" style="background-color:#8d81ac;" name="svyazknopka"></div></div></div></div>
								</form>
								<div class="popup_form_text">Мы не передаем Вашу персональную информацию третьим лицам.</div>
</div></div>

Открывать это

<div id="sps" class='popup_thanks'>
    <div class='popup_thanks_innersps animated flipInY'>
        <button class='close' type='button' data-dismiss='modal'><img src="/portfolio/img/krest.png" alt=""></button>
        <div class='popup_thanks_title'>Спасибо за заказ!</div>
        <div class='popup_thanks_text'>В течении некоторого времени с вами свяжутся.</div>
    </div>
</div>

[Александр Серяков]

https://jsfiddle.net/alexndb/nhseytd4/1/

[Антон]

Александр Серяков: в самом коде не работает.

[Антон]

Александр Серяков: пытался через ваш код, вообще реакции 0...

Answer 2

[Евгений]

При открытии модального окна создавать событие открытия окна через trigger. и потом отловить событие открытия окна, в котором будем его закрывать через какое-то время через setTimeout

Comments

[Антон]

А код можно ?, а то я дуб в js вообще...

[Евгений]

че то правда я загнул там с созданием событий и т.д.

примерно так на jquery должно выглядеть:

function getModalForm( args ) {
/* ... */
$('.класс_модального_окна').show();
setTimeout(function(){
$('.класс_модального_окна').hide()
}, 3000); 
}

$('.i-like-it').on('click', function(e){
e.preventDefault();
getModalForm( args );
});

[Антон]

Евгений: а можно вот в этот код сунуть анимацию?

setTimeout(function(){
$('#likes').hide()
}, 3000);

[Евгений]

sizest: Создавайте элемент с гифкой, или что там у вас, и отображайте/скрывайте его в нужный момент

[Антон]

Евгений: Сделал все гораздо проще, закрывает но проблема в том что.

не работает анимация хотя указана правильно

<script type="text/javascript">
		setTimeout('$("#likes").zoomOut(500);',2000);
		</script>

А тут она работает, в чем прикол?

<script type="text/javascript">
		setTimeout('$("#likes").fadeOut(500);',2000);
		</script>

И опять таки пока загружается body