Javascript 单击按钮时显示 Bootstrap 警告框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30050678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show Bootstrap alert box on a button click
提问by Neo
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?
我想在单击按钮时显示警告框，有人可以帮我这样做吗？
采纳答案by Paul Fitzgerald
This jsfiddle shows how you can show a bootstrap alert box on click
这个 jsfiddle 展示了如何在点击时显示引导警告框
http://jsfiddle.net/g1rnnr8r/2/
http://jsfiddle.net/g1rnnr8r/2/
You need to implement jquery's show()method. The code you need to use is.
你需要实现jquery的show()方法。您需要使用的代码是。
$(document).ready(function(){
$('button').click(function(){
$('.alert').show()
})
});
回答by saikiran.vsk
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.
我添加了一些 ID 并编写了一些代码。试着理解，如果你没有得到问我。好的希望这对你有帮助，如果不是问我更多。
回答by Puneet
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>回答by Pekka
If you want to create custom modal dialog box, then you could use this small library for it: http://bootboxjs.com/
如果你想创建自定义模态对话框，那么你可以使用这个小库：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.
否则，您需要手动创建模态和 javascript 触发器。
回答by Nitin Pawar
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>
