Bootstrap Alert 使用
参考 http://www.bootcss.com/javascript.html#alerts
不过这里没有动态alert的例子
于是再参考http://stackoverflow.com/questions/10082330/dynamically-create-bootstrap-alerts-box-through-javascript
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<link href="../css/bootstrap.css" rel="stylesheet">
<script src="../js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../js/bootstrap.js" type="text/javascript"></script>
</head>
<body>
<div ></div>
<!-- alert-error 是红色警告 -->
<div class="alert alert-block alert-error fade in" >
<button type="button" class="close" data-dismiss="alert">×</button>
<h4 class="alert-heading">Error!</h4>
<p>Error!Error!Error!Error!Error!Error!Error!Error!
</p>
<p>
<a class="btn btn-danger" href="#">Take this action</a>
<a class="btn" href="#" data-dismiss="alert" >Or do this</a>
</p>
</div>
<div ></div>
<input type = "button" id = "clickme" value="Click me!"/>
<div id = "alert_placeholder"></div>
<script type="text/javascript">
$(function(){
//$(".alert").animate({height:"121px"},1500);
$(".alert").alert();
});
</script>
<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>
</body>
</html>