stop auto-closing the popup when the popup is active (jquery/javascript)

Question

I have written a code where the popup closes automatically, but the problem is the popup shouldn't close while the user is selecting/typing something from the popup. if the popup is idle for 10sec/15sec then it should close automatically. Any help is appreciated, thanks in advance.

    $(document).ready(function(){
          $(".popup_data").hide(); 
          $('#search').click(function(){   
           if ($(".popup_data").css("display") == "none") {             
               $(".popup_data").show();                  
            } else {                
               $(".popup_data").hide();          
            }
          });  
        });
        $(document).ready(function(){
          $("#search").click(function() {    
            if($('.popup_data ').is(':visible')){
            var timeout = window.setTimeout(function(){
                $('.popup_data ').stop().fadeOut('medium');           
            }, 5000);
            }
          });
})

.popup_data{border: 1px solid #C6CFD6; width:320px; height:120px; }

user_8844723 · Answer

You can use the bind function to bind what ever event you want to stop hiding the modal I've added change and keyup events

$(document).ready(function(){

          var idle=false;
          
          var timeout = null;

          $(document).bind("change keyup click", function() {
              clearTimeout(timeout);

              timeout = setTimeout(function() {
                  if($('.popup_data ').is(':visible')){
                     $('.popup_data ').stop().fadeOut('medium');  
                  }
              }, 5000);
          });

          $(".popup_data").hide(); 
          
          $('#search').click(function(){   
            if ($(".popup_data").css("display") == "none") {             
               $(".popup_data").show();                  
            } else {                
               $(".popup_data").hide();          
            }
        });  
   
})

.popup_data{border: 1px solid #C6CFD6; width:320px; height:120px; }

user_14850015 · Answer

Add 2 event listeners. First one will destroy timer while focus on selects inside popup. Second one will restart timer after any select fires blur event.

    $(document).ready(function(){
          $(".popup_data").hide(); 
          $('#search').click(function(){   
           if ($(".popup_data").css("display") == "none") {             
               $(".popup_data").show();                  
            } else {                
               $(".popup_data").hide();          
            }
          });  
        });
        $(document).ready(function(){
          var timeout;
          $("#search").click(function() {    
            if($('.popup_data ').is(':visible')){
            timeout = startTimer();
            }
          $('body').on('focus', 'select', () => {
           window.clearTimeout(timeout);
          });
          $('body').on('blur', 'select', () => {
           window.clearTimeout(timeout); 
           timeout = startTimer();});
          });
});

const startTimer = () => (
 window.setTimeout(function(){
 $('.popup_data ').stop().fadeOut('medium');           
 }, 2000)
);

.popup_data{border: 1px solid #C6CFD6; width:320px; height:120px; }

stop auto-closing the popup when the popup is active (jquery/javascript)

2 Answers