Question

114

Make an alert using twitter's bootstrap disappears after a few seconds

rated 0 times [ 116] [ 2] / answers: 1 / hits: 12257 / 11 Years ago, thu, january 23, 2014, 12:00:00

im trying to learn twitter's bootstrap CSS framework to make some alerts to the users, I want, after showing the alert to the user, the alert disappears after 3 seconds have elapsed. I make this code, but does not work, can not close the alert, and do not understand what I'm doing wrong:

<!DOCTYPE html>

    <head>

        <title>Alert in boostrap</title>

        <link rel=stylesheet href=http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css>   

        <script type=text/javascript src=http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js></script>

        <script type=text/javascript>

            window.setTimeout(function() {

                $(.alert-message).fadeTo(500, 0).slideUp(500, function(){

                    $(this).remove(); 

                });

            }, 3000);

        </script>

    </head>



    <body >

        <br><br>

        <div class=container>

                <h1>This is a test</h1>

                <div id=alert_message class=alert style=width:200px >

                    <span class=close data-dismiss=alert>&times;</span>

                    <span><strong>Atention!</strong> Responsive Design with Twitter Bootstrap.</span>

                </div>

        </div>  

    </body>

</html>

ps: im newbie in the art of web programming, have a little patience if the question or error is very obvious or stupid. Thank you very much to all

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

benitoh

Add To Favorites

Follow

Total Points: 150

Total Questions: 113

Total Answers: 104

Location: India

Member since Wed, Aug 26, 2020

4 Years ago

answered 11 Years ago irvingcarloe · Accepted Answer

Firstly, you're missing jQuery library, include it before bootstrap.min.js

<script type=text/javascript src=//code.jquery.com/jquery-1.10.2.min.js></script>

Secondly, it should be #alert_message instead of .alert-message:

window.setTimeout(function() {

  $(#alert_message).fadeTo(500, 0).slideUp(500, function(){

    $(this).remove(); 

  });

}, 3000);

Bootply Demo