Good day! There is a script modal window that opens with a click. I cannot edit this code, namely, specify the delay function in it.

 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',}); }); });

Below in the page code this script is duplicated.

 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',}); }); });

This is done to automatically open the window after a certain time. But at the same time, of course, there is one problem: it is impossible to open the window by clicking before it opens automatically. After it opens itself, by clicking it you can already open it. How to fix this error? Thank you for your help! https://jsfiddle.net/LADYX/428ay5np/1/

  • where is .open_login? in body? - Robert Dampilon
  • one
    Why not use setTimeout() with delay * 1000 , and when the timer expires, trigger the click event on '.open_login' $('.open_login').trigger('click') ? - Dmitry
  • @Robert Dampilon yes, of course in the body. - LADYX
  • @Dmitry I can’t open the window anyway until the timer expires. And I need to be able to open it both after this and before it opens by itself on a timer. - LADYX
  • one
    I probably misunderstand the problem. Here is a minimal jsfiddle.net/428ay5np example. And it works. - Dmitry

1 answer 1

Still, setTimeout as a solution

 // Наш код 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">&times;</div> </div> </div>

  • Dmitry, yes, everything works as it should. Thank you very much! Good luck to you! - LADYX