gpt4 book ai didi

javascript - 使用 Twitter 的 Bootstrap 发出警报几秒钟后消失

转载 作者:太空宇宙 更新时间:2023-11-04 13:32:19 25 4
gpt4 key购买 nike

我正在尝试学习 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">&times;</span>
<span><strong>Atention!</strong> Responsive Design with Twitter Bootstrap.</span>
</div>
</div>
</body>
</html>

ps:我是网络编程领域的新手,如果问题或错误非常明显或愚蠢,请耐心等待。非常感谢大家

最佳答案

首先,你缺少 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);

Bootply Demo

关于javascript - 使用 Twitter 的 Bootstrap 发出警报几秒钟后消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21300647/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com