Show Bootstrap alert box on a button click
Question
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>
How can I show alert box on button click?
5 answers
solution1
11 ACCPTED 2015-05-05 10:47:29
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()
})
});
solution2
8 2015-05-05 10:46:20
function showAlert(){ if($("#myAlert").find("div#myAlert2").length==0){ $("#myAlert").append("<div class='alert alert-success alert-dismissable' id='myAlert2'> <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button> Success! message sent successfully.</div>"); } $("#myAlert").css("display", ""); }
<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> <button value="showAlert" onclick="showAlert();"> Show Alert</button> <div class="container" style="display:none;" id="myAlert"> <h2>Dismissal Alert Messages</h2> <div class="alert alert-success alert-dismissable" id="myAlert2"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> Success! message sent successfully. </div> </div>
I've added some IDs and written some code. Try to understand, If you are not getting ask me. Okay Hope this will help for you, If not ask me for more.
solution3
4 2015-05-05 10:46:05
Try This. What is done here is:
- Added one button "Show Alert message".
- By Default alert message will be hidden.
- On click of "Show alert message" alert message will be shown
$("#btnShow").click(function(){ $(".alert").hide().show('medium'); });
.alert{ display:none; }
<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> <button id="btnShow">Show Alert message</button> <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>
solution4
3 2018-07-12 06:36:45
You can check this one:
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="alert alert-success alert-dismissible">
<a class="close" data-dismiss="modal" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
</div>
</div>
</div>
solution5
2 2015-05-05 10:43:12
If you want to create custom modal dialog box, then you could use this small library for it: http://bootboxjs.com/
<!-- bootbox code -->
<script src="bootbox.min.js"></script>
<script>
$(document).on("click", ".alert", function(e) {
bootbox.alert("Hello world!", function() {
console.log("Alert Callback");
});
});
</script>
Otherwise you need to create the modal and javascript triggers manually.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Show alert on a button click
Show Bootstrap Alert on Button Click via Javascript / jQuery
Button onlick show alert box
Click button to show index alert
Ajax show bootstrap alert box 1 time
Bootstrap 4 alert box close button not aligned
How to get a .click button to hide an alert box
Alert content of input box on click of button — React
when I click on submit button my javascript first alert box show in mobile device but works fine in desktop
Issue on Click and Alert on Button in Bootstrap Popover
Related Tags