Opening Bootstrap Alert programmatically

Question

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>

As you said, it's a "bootstrap alert", not a "modal" (slightly confusing as you say "opening of an alert", which makes no sense as you don't "open" an alert, you "open" a dialog). You can simply not show the alert, then only show it when needed. ` — freedomn-m, Oct 18 '19 at 08:55

chans · Answer 1 · 2019-10-18T08:15:18.630

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>

Thanks @chans, It solves the problem if I was using a modal but I'm using an alert and as such, $("#alert").show() won't work. https://getbootstrap.com/docs/4.3/components/alerts/ doesn't show how to trigger an alert with JS $('.alert').alert() doesn't work either. — user2721794, Oct 18 '19 at 07:41

score 0 · Answer 2 · answered Oct 17 '19 at 16:13

0

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.

answered Oct 17 '19 at 16:13

brad

1,407
19
33

Thanks for your reply... it partially solves the problem but again, I haven't found a way to actually do $('#cookie-alert').show() on bootstrap alerts here https://getbootstrap.com/docs/4.3/components/alerts/ Note: I'm not using a modal but an alert. – user2721794 Oct 18 '19 at 07:36
I've added the HTML snippet i'm using to the question. – user2721794 Oct 18 '19 at 07:50

Opening Bootstrap Alert programmatically

2 Answers2