Opening Bootstrap Alert programmatically

user_2721794 0
Viewed 1147

I'm trying to dynamically show a bootstrap alert https://getbootstrap.com/docs/4.3/components/alerts/ that displays a message to accept using cookies once a user clicks the OK button, the alert message should disappear and not show to that user again during that session.

Unfortunately, I can't find a documentation on bootstrap site that allows for programmatic opening of a bootstrap alert. Therefore every-time the website is refreshed, the alert pops up again. 

 <div class="alert fade show cookie-alert" role="alert" data-dismiss="alert">
            <div class="container">
                This website stores cookies. These cookies are used to collect information about how you interact with our website, we use this information to improve and customize your browsing experience. Read our <a target="_blank" href="http://assets.investnow.ng/InvestNow_TC.pdf" style="color:gray;font-weight:bold">terms and conditions</a> to learn more.
                <button type="button" class="btn btn-danger btn-sm pull-right cookie-btn okbtn" data-dismiss="alert" aria-label="Close">OK</button>
            </div>
        </div>
session-storage alerts html jquery javascript
2 Answers

Please find the code below

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</head>
<body>
<div class="alert  alert-dismissible">
    <div class="container">
                This website stores cookies. These cookies are used to collect information about how you interact with our website, we use this information to improve and customize your browsing experience. Read our <a target="_blank" href="http://assets.investnow.ng/InvestNow_TC.pdf" style="color:gray;font-weight:bold">terms and conditions</a> to learn more.
                <button type="button" id="alertClose" class="btn btn-danger btn-sm pull-right cookie-btn okbtn" data-dismiss="alert" aria-label="Close">OK</button>
            </div>


<script>
$(document).ready(function(){
localStorage.setItem("acceptCookies", true);
 $(".alert").hide();
 if (typeof(Storage) !== "undefined") {
  if (localStorage.getItem("acceptCookies")) {
    $(".alert").show();
    $("#alertClose").click(function(){
      localStorage.setItem("acceptCookies", "accepted");
      $(".alert").alert("close");
    });
  }
 } 
});
</script>

</body>
</html>
user_105557850

You could store in localStorage if the user has dismissed the cookie alert.

On page load, you would check if the key has ben set and show the alert if not:

if (!localStorage.getItem('cookie-alert-dismissed')) {
    $('#cookie-alert').show()
}

and then add it when the user closes the alert:

$('#cookie-alert button').click(function() {
    $('#cookie-alert').hide()
    localStorage.setItem('cookie-alert-dismissed', 1);
});

This key would persist until the user empties their localStorage or uses a different browser.

user_61581560
Related