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">×</button>
Success! message sent successfully.
</div>
</div>
</body>
I want to show alert box on button click , can anyone help me to do so?
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).
Alert Links Add the alert-link class to any links inside the alert box to create "matching colored links": Success!
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()
})
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With