As a response from an ajax call, I use a delay from 5 sec for closing the div in which the echo comes.

This is my div-popup:

<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 />'; ?>

The ajax success:


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

For manually closing the popup-div, I use this code:

 // close echo manually
    $(document).on('click','.closebtn',function() {     

The problem: When I want to close the echomessage by clicking X within 5 sec, it does not work.

When I delete $('.echomessage').delay(5000).fadeOut(500); in the success, it closes immediately after click

How can I have both options: if not click, closes after 5sec and if click close immediately?


1 Answers

Community On Best Solutions

Instead of using delay you can use a asynchron setTimeout function...

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