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 lang="en">
<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 style="height:200px;"></div>
  <!-- alert-error 是红色警告 -->
  <div class="alert alert-block alert-error fade in" style="height:0px">
    <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 style="padding:50px;margin:50px;"></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>

 

posted @ 2013-08-26 21:17  cart55free99  阅读(1638)  评论(0)  编辑  收藏  举报