Open In App

Bootstrap 5 Alerts JavaScript behavior Events

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn about the Alerts JavaScript behavior Events fired when interacting with Bootstrap 5 Alerts. Bootstrap 5 Alert component is useful for providing alerts or feedback messages arising from the user interacting with the functionalities of the application.

Bootstrap 5 Alerts JavaScript behavior Events:

  • close.bs.alert: It is fired as soon as the close() method of the instance is called. 
  • closed.bs.alert: It is fired when the alert is completely closed after all the CSS transitions are done.

Syntax:

var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
...
})

Let us understand more about this using some examples below:

Example 1: In this example, we will listen for the alert javascript behavior event, close.bs.alert,  that gets fired immediately when an alert is closed.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Behavior events</title>
    <link href=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>
  
<body>
    <h1 class="text-success">GeeksforGeeks</h1>
    <div id="alert" role="alert"
        class="alert alert-warning alert-dismissible fade show" >
        <strong>GFG Alert!</strong> This is a sample alert from GFG.
        <button type="button" class="btn-close" 
                data-bs-dismiss="alert" aria-label="Close">
        </button>
    </div>
  
    <script>
        const alert = document.getElementById('alert')
        alert.addEventListener('close.bs.alert', () => {
            console.log('close instance method called!');
        })
    </script>
</body>
</html>


Output:

 

Example 2: In this example, we will listen for the alert javascript behavior event, closed.bs.alert,  that gets fired when an alert is closed completely.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Alerts JavaScript behavior Events</title>
    <link href=
        rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>
  
<body>
    <h1 class="text-success">GeeksforGeeks</h1>
    <div id="alert"  
         class="alert alert-warning alert-dismissible fade show" >
        <strong>GFG Alert!</strong
        This is a sample alert from GFG.
        <button type="button" class="btn-close" 
                data-bs-dismiss="alert" 
                aria-label="Close">
        </button>
    </div>
  
    <script>
        const alert = document.getElementById('alert')
        alert.addEventListener('closed.bs.alert', () => {
            console.log('alert completely closed!');
        })
    </script>
</body>
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/alerts/#events



Last Updated : 07 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Similar Reads