可忽略的警报 [英] Dismissable alert

查看:72
本文介绍了可忽略的警报的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当我单击 x按钮时,我试图使警报消失,但是似乎缺少一些东西,使它无法工作,不确定是什么。

I'm trying to get an alert to disappear when the "x" button is clicked, but there seems to be something missing that's keeping it from working, not sure what it is.

<div class="alert alert-success alert-dismissible">
<button type = "button" class="close" data-dismiss = "alert">x</button>
    You've done it!
</div>


推荐答案

要使工作失效,您需要添加 jQuery bootstrap.js

for dismissible to work, you need to include jQuery and bootstrap.js in your document.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="alert alert-success alert-dismissible">
    <button type = "button" class="close" data-dismiss = "alert">x</button>
    You've done it!
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div style="margin-top: 50px" class="alert alert-success alert-dismissible">
    <button type = "button" class="close" data-dismiss = "alert">x</button>
    You've done it!
</div>

这篇关于可忽略的警报的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆