Добрый день! Есть скрипт модального окна, которое открывается по клику. Этот код править я не могу, а именно указать в нем функцию delay.
jQuery(document).ready(function () {
jQuery('.open_login').click(function(e) {
e.preventDefault();
jQuery('body').css({overflow: 'hidden',});
jQuery('.login_lightbox').fadeIn(800);
jQuery('.login_overlay').fadeIn(800);
});
jQuery('.login_close').click(function(e) {
e.preventDefault();
jQuery('.login_overlay').fadeOut(0);
jQuery('.login_lightbox').fadeOut(0);
jQuery('body').css({overflow: 'auto',});
});
});
Ниже в коде страницы этот скрипт дублируется.
jQuery(document).ready(function () {
var delay = 30;
$('.login_overlay').delay(delay * 1000).fadeIn(800,function(){
jQuery('body').css({overflow: 'hidden',});
jQuery('.login_lightbox').fadeIn(800);
jQuery('.login_overlay').fadeIn(800);
});
jQuery('.login_close').click(function(e) {
e.preventDefault();
jQuery('.login_overlay').fadeOut(0);
jQuery('.login_lightbox').fadeOut(0);
jQuery('body').css({overflow: 'auto',});
});
});
Это сделано для того, чтобы окно автоматически открывалось через определенное время. Но при этом, конечно, есть одна проблема: невозможно открыть окно по клику до того, как оно откроется автоматически. После того, как оно само откроется, по клику его уже можно открывать. Как исправить эту ошибку? Благодарю за помощь! https://jsfiddle.net/LADYX/428ay5np/1/
Всё-таки предложу в качестве решения setTimeout
// Наш код
jQuery(document).ready(function() {
var delay = 5;
// устанавливаем таймаут
var timeoutId = setTimeout(function() {
// по истечении времени, сгенерируем событие `click` на `.open_login`
$('.open_login').trigger('click');
}, delay * 1000);
// если после открытия диалога в ручную, его не надо отображать по таймеру,
// назначим обработчик для отмены таймаута
$('.open_login').one('click', function() {
clearTimeout(timeoutId)
})
});
// Код, который нельзя править
jQuery(document).ready(function() {
jQuery('.open_login').click(function(e) {
e.preventDefault();
jQuery('body').css({
overflow: 'hidden',
});
jQuery('.login_lightbox').fadeIn(800);
jQuery('.login_overlay').fadeIn(800);
});
jQuery('.login_close').click(function(e) {
e.preventDefault();
jQuery('.login_overlay').fadeOut(0);
jQuery('.login_lightbox').fadeOut(0);
jQuery('body').css({
overflow: 'auto',
});
});
});
.login_overlay {
display: none;
}
.login_lightbox {
background: #fff;
border: 1px solid #000;
display: none;
height: 150px;
width: 300px;
}
.login_close {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="open_login">Open</button>
<div class="login_overlay">
<div class="login_lightbox">
<div class="login_close">×</div>
</div>
</div>
Продвижение своими сайтами как стратегия роста и независимости