通过JavaScript动态创建引导警报框
通过JavaScript动态创建引导警报框
提问于 2012-04-10 10:19:54
我正在为我的项目使用Bootstrap2.0，我想在我的页面(http://twitter.github.com/bootstrap/javascript.html#alerts)中动态添加Bootstrap警告框。我想做一些类似的事情：
bootstrap-alert.warning("Invalid Credentials"); 回答 8
Stack Overflow用户
发布于 2013-06-15 06:36:42
/**
Bootstrap Alerts -
Function Name - showalert()
Inputs - message,alerttype
Example - showalert("Invalid Login","alert-error")
Types of alerts -- "alert-error","alert-success","alert-info","alert-warning"
Required - You only need to add a alert_placeholder div in your html page wherever you want to display these alerts "<div id="alert_placeholder"></div>"
Written On - 14-Jun-2013
**/
function showalert(message,alerttype) {
$('#alert_placeholder').append('<div id="alertdiv" class="alert ' + alerttype + '"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')
setTimeout(function() { // this will automatically close the alert and remove this if the users doesnt close it in 5 secs
$("#alertdiv").remove();
}, 5000);
}Stack Overflow用户
发布于 2013-05-23 20:31:00
您还可以创建HTML警报模板，如下所示：
<div class="alert alert-info" id="alert_template" style="display: none;">
<button type="button" class="close">×</button>
</div>所以你可以在JavaScript中这样做：
$("#alert_template button").after('<span>Some text</span>');
$('#alert_template').fadeIn('slow');在我看来这是更干净更快的。此外，在调用fadeIn()时要遵循Twitter Bootstrap标准。
要保证此警报模板也适用于多个呼叫(这样它就不会将新消息添加到旧消息中)，请将以下内容添加到您的JavaScript：
$('#alert_template .close').click(function(e) {
$("#alert_template span").remove();
});因此，每次您通过x按钮关闭警报时，此调用都会删除span元素。
Stack Overflow用户
发布于 2014-05-24 09:30:34
我创建了一个非常简单和基本的插件：
(function($){
$.fn.extend({
bs_alert: function(message, title){
var cls='alert-danger';
var html='<div class="alert '+cls+' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>';
if(typeof title!=='undefined' && title!==''){
html+='<h4>'+title+'</h4>';
}
html+='<span>'+message+'</span></div>';
$(this).html(html);
},
bs_warning: function(message, title){
var cls='alert-warning';
var html='<div class="alert '+cls+' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>';
if(typeof title!=='undefined' && title!==''){
html+='<h4>'+title+'</h4>';
}
html+='<span>'+message+'</span></div>';
$(this).html(html);
},
bs_info: function(message, title){
var cls='alert-info';
var html='<div class="alert '+cls+' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>';
if(typeof title!=='undefined' && title!==''){
html+='<h4>'+title+'</h4>';
}
html+='<span>'+message+'</span></div>';
$(this).html(html);
}
});
})(jQuery);用法是
<div id="error_container"></div>
<script>
$('#error_container').bs_alert('YOUR ERROR MESSAGE HERE !!', 'title');
</script>第一个插件，它可以很容易地变得更好
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10082330
复制相关文章
相似问题