通过JavaScriptdynamic创buildBootstrap提醒框

我为我的项目使用Bootstrap 2.0,我想在我的页面( http://twitter.github.com/bootstrap/javascript.html#alerts )中dynamic添加Bootstrap警报框。 我想做一些事情:

bootstrap-alert.warning("Invalid Credentials"); 

试试这个(在jsfiddle中查看这个代码的工作示例: http : //jsfiddle.net/periklis/7ATLS/1/ )

 <input type = "button" id = "clickme" value="Click me!"/> <div id = "alert_placeholder"></div> <script> bootstrap_alert = function() {} bootstrap_alert.warning = function(message) { $('#alert_placeholder').html('<div class="alert"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>') } $('#clickme').on('click', function() { bootstrap_alert.warning('Your text goes here'); }); </script>​ 

编辑 :现在有库简化和简化这个过程,如bootbox.js

 /** 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); } 

您也可以像这样创build一个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(); }); 

因此,每次通过xbuttonclosures警报时,都会调用span元素。

我创build了这个非常简单和基本的插件:

 (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">&times;</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">&times;</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">&times;</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> 

第一个插件永远,它可以很容易地做得更好

今天发现这个,做了一些调整,并结合了其他答案的function,同时将其更新到bootstrap 3.x. NB:这个答案需要jQuery。

在html中:

 <div id="form_errors" class="alert alert-danger fade in" style="display:none"> 

在JS中:

 <script> //http://stackoverflow.com/questions/10082330/dynamically-create-bootstrap-alerts-box-through-javascript function bootstrap_alert(elem, message, timeout) { $(elem).show().html('<div class="alert"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><span>'+message+'</span></div>'); if (timeout || timeout === 0) { setTimeout(function() { $(elem).alert('close'); }, timeout); } }; </script>​ 

然后你可以调用这个:

 bootstrap_alert('#form_errors', 'This message will fade out in 1 second', 1000) bootstrap_alert('#form_errors', 'User must dismiss this message manually') 

我结束了使用toastr( https://github.com/CodeSeven/toastr )的风格修改使toastr警报看起来像引导警报

我发现AlertifyJS是一个更好的select,并有一个Bootstrap主题。

 alertify.alert('Alert Title', 'Alert Message!', function(){ alertify.success('Ok'); }); 

还有一个4个组件警报确认提示通知

例如: JSFiddle