通过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">×</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>
第一个插件永远，它可以很容易地做得更好
今天发现这个，做了一些调整，并结合了其他答案的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">×</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
