How to Auto Hide Alert Box After It Showing It

How can I auto hide alert box after it showing it?

tldr; jsFiddle Demo

This functionality is not possible with an alert. However, you could use a div

function tempAlert(msg,duration)
{
 var el = document.createElement("div");
 el.setAttribute("style","position:absolute;top:40%;left:20%;background-color:white;");
 el.innerHTML = msg;
 setTimeout(function(){
  el.parentNode.removeChild(el);
 },duration);
 document.body.appendChild(el);
}

Use this like this:

tempAlert("close",5000);

Autoclose alert

jsFiddle Demo

This functionality is not possible with an alert. However, you could use a div

function tempAlert(msg,duration)
{
 var el = document.createElement("div");
 el.setAttribute("style","position:absolute;top:40%;left:20%;background-color:white;");
 el.innerHTML = msg;
 setTimeout(function(){
  el.parentNode.removeChild(el);
 },duration);
 document.body.appendChild(el);
}

Use this like this:

tempAlert("close",1000);

Bootstrap Alert Auto Close

For a smooth slide-up:-

$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").slideUp(500);
});

$(document).ready(function() {
  $("#success-alert").hide();
  $("#myWish").click(function showAlert() {
    $("#success-alert").fadeTo(2000, 500).slideUp(500, function() {
      $("#success-alert").slideUp(500);
    });
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="product-options">
  <a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a>
  <a href="" class="btn btn-mini"> Purchase </a>
</div>
<div class="alert alert-success" id="success-alert">
  <button type="button" class="close" data-dismiss="alert">x</button>
  <strong>Success! </strong> Product have added to your wishlist.
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

How to auto close Alert boxes

You can not close an alert box, just you can hijack window.alert

window._alert = window.alert;
window.alert = function () {    
};

The code would have to appear before the third party library's code. What this means is, if you want to use an alert, you would have to change your code.

One way would to call the method that has the reference

window._alert("hi");

Other way would be to overload the "new" function

window._alert = window.alert;
window.alert = function (msg, showItNow) {    
    if (showItNow) {
        window._alert(msg);
    }
};
window.alert("BOOOO!");  //I will not show up
window.alert("hi", true); //I will show up

How to hide alert box in javascript

You cannot. This is browser specific and so you cannot control it. You can simply force it to show.

How to auto hide multiple alerts one by one. first in - first out?

toastr has timeouts, so they are handled fifo.

<script src="toastr.js"></script>

  var options = {
    "preventDuplicates": true,
    "timeOut": 5000
  };
  toastr.options = options;
  toastr.warning('this is the message, 'Warning:');

How to hide Bootstrap alert box when no message

Make sure to initially hide your alert box. Also it looks like your putting a JavaScript variable right into your HTML. Also the string bag.session.username may always evaluate to true. Maybe this?

<script type="text/javascript">
$(document).ready(function () {
    if (typeof bag.session.username != "undefined") {
        $(".alertBox span").text(bag.session.username);
        $(".alertBox").show();
    }
    else {
        $(".alertBox").hide();
    }
});
</script>

React Native Alert auto hide and dissapear

I found the solution. The issue is with my Loading spinner overlay library

It will automatically close the Alert

As a solution, I added setTimeout function for alert

Code

setTimeout(() => {
            Alert.alert(
              'Error',
              'Please Check Email and Password',
              [{text: 'OK', onPress: () => dispatch(onLoginSuccess(false))}],
              {cancelable: false},
            );
          }, 100);