我正在为我的项目使用Bootstrap2.0,我想在我的页面(http://twitter.github.com/bootstrap/javascript.html#alerts)中动态添加Bootstrap警告框。我想做一些类似的事情:
bootstrap-alert.warning("Invalid Credentials");
发布于 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);
}
发布于 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元素。
发布于 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>
第一个插件,它可以很容易地变得更好
https://stackoverflow.com/questions/10082330
复制相似问题