fra*_*a66 2 javascript jquery html5 twitter-bootstrap
我试图学习twitter的bootstrap CSS框架,向用户发出一些警告,我想,在向用户显示警报后,警报会在3秒后消失.我制作这段代码,但不起作用,无法关闭警报,也不明白我做错了什么:
<!DOCTYPE html>
<head>
<title>Alert in boostrap</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
window.setTimeout(function() {
$(".alert-message").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 3000);
</script>
</head>
<body >
<br><br>
<div class="container">
<h1>This is a test</h1>
<div id="alert_message" class="alert" style="width:200px" >
<span class="close" data-dismiss="alert">×</span>
<span><strong>Atention!</strong> Responsive Design with Twitter Bootstrap.</span>
</div>
</div>
</body>
</html>
ps:我是网络编程艺术的新手,如果问题或错误非常明显或愚蠢,请有一点耐心.非常感谢大家
Fel*_*lix 17
首先,你缺少jQuery库,之前包含它 bootstrap.min.js
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
其次,它应该是#alert_message代替.alert-message:
window.setTimeout(function() {
$("#alert_message").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 3000);
| 归档时间： |
|
| 查看次数： |
11129 次 |
| 最近记录： |