如何在 div 5 秒后使用 jquery 自动关闭时手动关闭弹出窗口 div

Question

作为对 ajax 调用的响应，我使用了 5 秒的延迟来关闭回声出现的 div。

这是我的 div-弹出窗口：

<div class="echo">
   <div class="echomessage" role="alert">
      <span class="closebtn">X</span>  
      <?php echo '<i class="fas fa-check-square"></i><b>' . $numberFiles . '</b> items are deleted!<br />'; ?>
   </div>
</div>

ajax成功：

success:function(data){

            $('.echo').html(data);                  
    $('.echomessage').delay(5000).fadeOut(500);// close auto after 5 sec
}

对于手动关闭弹窗-div，我使用这个代码：

 // close echo manually
    $(document).on('click','.closebtn',function() {     
        $(this).closest('.echomessage').fadeOut(500);
    });

问题：当我想在 5 秒内通过单击 X 关闭 echomessage 时，它不起作用。

当我删除$('.echomessage').delay(5000).fadeOut(500);成功时，点击后立即关闭

我怎样才能同时拥有这两个选项：如果不点击，5 秒后关闭，如果点击立即关闭？

Fiddle: https://jsfiddle.net/3v0noy9h/

Answer 1

您可以使用异步 setTimeout 函数代替延迟...

$(document).on('click','.closebtn',function() {     
        $(this).closest('.echomessage, .echomessage-exists, .echomessage-download').fadeOut(500);
    });
setTimeout(function () {$('.echomessage').fadeOut()}, 5000);

如何在 div 5 秒后使用 jquery 自动关闭时手动关闭弹出窗口 div

how to close manually popup div when div auto closes after 5 sec with jquery

ajax

jquery

popup