Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show Bootstrap alert box on a button click

The following code shows an alert box:

<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <h2>Dismissal Alert Messages</h2>
        <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            Success! message sent successfully.
        </div>
    </div>
</body>


I want to show alert box on button click , can anyone help me to do so?

like image 766
Neo Avatar asked May 05 '15 10:05

Neo


People also ask

How do I show and hide a Bootstrap alert?

To close the alert message, add a . alert-dismissible class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).

Which Bootstrap 4 class is used to add links inside an alert message?

Alert Links Add the alert-link class to any links inside the alert box to create "matching colored links": Success!


1 Answers

This jsfiddle shows how you can show a bootstrap alert box on click

http://jsfiddle.net/g1rnnr8r/2/

You need to implement jquery's show() method. The code you need to use is.

$(document).ready(function(){
    $('button').click(function(){
        $('.alert').show()
    }) 
});
like image 76
Paul Fitzgerald Avatar answered Sep 25 '22 05:09

Paul Fitzgerald