Bootsrap Alert Close

by abhitalks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="alert alert-warning custom-alert" role="alert">
      <strong>Warning!</strong> This alert will animate itself to close in 3 secs.
</div>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>

<hr>

<div class="alert alert-warning" role="alert">
    <button type="button" class="close">
      <span>&times;</span>
    </button>    
      <strong>Warning!</strong> This alert will animate on clicking the close button.
</div>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>

JavaScript

window.setTimeout(function() {
    //$(".custom-alert").alert('close'); <--- Do not use this
  
    $(".custom-alert").slideUp(500, function() {
        $(this).remove();
    });
}, 3000);

$("div.alert").on("click", "button.close", function() {
    $(this).parent().animate({opacity: 0}, 500).hide('slow');
});