How to load notification alert on top right corner without click of button in bootstrap ? - GeeksforGeeks

31 Jul, 2019
Bootstrap Toast component provides an easy way to mimic the functionality of push notifications. Bootstrap Toast is like an alert box that can be displayed to the user whenever an event occurs. This component has been built with CSS flexbox which makes it easy to position and align.It is not necessary to show the toast on a button click. It can be shown for any type of event that occurs in the browser. Let’s see an example.
Example: Creating Bootstrap Notification/Toast. In this example we will show a push notification when the user scrolls the <div> in the page. To create a bootstrap toast we need to use the toast class on a division and add two divisions inside it with classes toast-header and toast-body. We will show the notification using jquery.
<!DOCTYPE html><html lang="en">  <head>    <title>        How to load notification alert on top        right corner without click of button         in bootstrap ?    </title>          <meta charset="utf-8">          <meta name="viewport"        content="width=device-width, initial-scale=1">              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script>          <style>        #notification {            position: absolute;            top: 0;            right: 0;        }        #para {            border: 1px solid black;            width: 300px;            height: 100px;            overflow: scroll;        }        .toast-color {            color: white;            background-color: #33b5e5;        }        h1 {            color:green;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>      <h3>Try Scrolling:</h3>          <div id="para">        <b>GeeksforGeeks:</b> A computer science portal        for geeks. It ia a good website for learning        computer science. It has a good programming        Question and have many Interwiew Experiences.        Prepare for the Recruitment drive of product        based companies like Microsoft, Amazon, Adobe        etc with a free online placement preparation        course.    </div>          <div class="toast toast-color" id="notification"                data-delay="3000">        <div class="toast-header toast-color">            <strong class="mr-auto">SCROLLED!</strong>            <small>Just Now</small>                          <button type="button" class="ml-2 mb-1 close"                    data-dismiss="toast" aria-label="Close">                <span aria-hidden="true">×</span>            </button>        </div>                  <div class="toast-body">            Hi! You just scrolled the paragaraph.        </div>    </div>      <script>        $(document).ready(function() {            $("#para").scroll(function() {                $('.toast').toast('show');            });        });    </script></body>  </html>
Output:
Before Scrolling the content:
After Scrolling the content:
Picked
Bootstrap
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?