当弹出窗口处于活动状态时停止自动关闭弹出窗口 (jquery/javascript)

Question

我编写了一个代码，其中弹出窗口会自动关闭，但问题是当用户从弹出窗口中选择/键入某些内容时，弹出窗口不应关闭。如果弹出窗口空闲 10 秒/15 秒，那么它应该自动关闭。感谢任何帮助，提前致谢。

    $(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; } 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="search">                       
        <button>&nbsp;popup</button>                
        </div> 
        <div class="popup_data " style="display: none;" >

      <div style="display:inline-flex; margin-top:20px;">
                 <label>test1</label>
                 <div>
                    <select >
                       <option value="">&nbsp;</option>
                       <option value="1">one two</option>
                       <option value="2">two</option>
                       
                    </select>
                 </div>
              </div>
     <div style="display:inline-flex;margin-top:20px;"> 
                 <label>test2</label>
                 <div>
                    <select >
                       <option value="">&nbsp;</option>
                       <option  value="1">one </option>
                       <option value="2">two</option>                                       
                    </select>
                 </div>
              </div>
       
     
        </div>

Answer 1

您可以使用绑定函数来绑定您想要停止隐藏模式的任何事件，我添加了更改和键盘事件

Map<String, Integer> names = new HashMap<String, Integer>();

$(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; }

Answer 2

添加 2 个事件监听器。 第一个将在专注于弹出窗口中的选择时销毁计时器。 在任何选择触发模糊事件后，第二个将重新启动计时器。

    $(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; } 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="search">                       
        <button>&nbsp;popup</button>                
        </div> 
        <div class="popup_data " style="display: none;" >

      <div style="display:inline-flex; margin-top:20px;">
                 <label>test1</label>
                 <div>
                    <select >
                       <option value="">&nbsp;</option>
                       <option value="1">one two</option>
                       <option value="2">two</option>
                       
                    </select>
                 </div>
              </div>
     <div style="display:inline-flex;margin-top:20px;"> 
                 <label>test2</label>
                 <div>
                    <select >
                       <option value="">&nbsp;</option>
                       <option  value="1">one </option>
                       <option value="2">two</option>                                       
                    </select>
                 </div>
              </div>
       
     
        </div>