seting a cookie when closing bootstrap allert-CodePudding

How can I store a cookie when user closes this alert from bootstrap

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

I know how to do it with "onclick" , but is there another way without modifying the above code?

CodePudding user response：

so are you asking how to attach listeners to dom elements without modifying the elements?

<script>
    $('.alert-dismissible button.btn-close').click(() => {
        // cookie stuff here.
    });
</script>

You can target them, the above is using jquery.

CodePudding user response：

Use one of the alert events to trigger your code

Event	Description
`close.bs.alert`	This event fires immediately when the `close` instance method is called.
`closed.bs.alert`	This event is fired when the alert has been closed (will wait for CSS transitions to complete).

$(".alert").on("closed.bs.alert", (e) => {
  console.log("here's where I would set a cookie")
  
  // doesn't work in StackSnippet sandbox
  // document.cookie = "favorite_framework=Bootstrap; SameSite=None; Secure";
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
  <div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
</div>