Bootstrap Alert 使用

时间：2022-03-26 10:08:30

参考 http://www.bootcss.com/javascript.html#alerts

不过这里没有动态alert的例子

于是再参考http://*.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>

相关文章