Question

我试图学习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：我是网络编程艺术的新手，如果问题或错误非常明显或愚蠢，请有一点耐心。非常感谢所有人

Answer 1

首先，你缺少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

Answer 2

你这里有一个错误$(".alert-message")这就是说你有一个名为“alert-message”的课程，但是你没有，你有并且不是一个类，所以它会是{{ 1}}

Answer 3

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="alert alert-success" id="success-alert">The message was sent</div>

<script>
$(".alert").delay(4000).slideUp(200, function() {
    $(this).alert('close');
});
</script>

Answer 4

签出Bootstrap Notify，这是一个使用jQuery和Bootstrap的依赖项的极其通用的警报插件。可以在MIT许可下使用。

调用新通知就像$.notify('Hello World')一样容易，但是您可以随心所欲地添加图像，图标，超链接，调整大小，重新设置样式。

使用twitter的引导程序发出警报几秒钟后就会消失

4 个答案: