Bootstrap的js插件之警告框(alert.js)

data-dismiss="alert"——为关闭button加入该属性能够使其自己主动为警告框赋予关闭功能。

.fade .in——为警告框在关闭时加入动画效果。

很多其它细节參考演示样例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>js插件_警告框</title>
    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
    <!--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
    <script src="jquery-1.11.1.min.js"></script>
    <script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h3>警告框演示样例</h3>

    <div class="alert alert-info alert-dismissible fade in" role="alert" id="myAlert">
        <button type="button" class="close" data-dismiss="alert" aria-label="close">
            <span aria-disabled="true">×</span>
        </button>
        感谢您选择<strong><要投哪></strong>
        <button type="button" class="btn btn-primary">详情</button>
    </div>
</div>
<script>
//    $("#myAlert").alert('close');
//    $('#myAlert').on('closed.bs.alert',function(e){
//        alert("关闭了");
//    })
</script>

</body>
</html>


posted @ 2017-06-08 14:43  lytwajue  阅读(6158)  评论(0编辑  收藏  举报