Bootstrap警告框（Alert）插件使用方法
更新时间：2017年03月21日 08:53:38 作者：boonyaxnn
这篇文章主要为大家详细介绍了Bootstrap 警告框（Alert）插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
有以下两种方式启用警告框的可取消（dismissal）功能：
1、通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能。
<a class="close" data-dismiss="alert" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" aria-hidden="true">×</a>
2、通过 JavaScript添加可取消功能：
$(".alert").alert()
html代码
<div class="alert alert-success"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="close" data-dismiss="alert" aria-hidden="true">√</a> <strong>成功！</strong>您的网络连接已成功！ </div>
效果图：
3、下面是一些警告框（Alert）插件中有用的方法：
效果图
4、下表列出了警告框（Alert）插件中要用到的事件。这些事件可在函数中当钩子使用。
html代码
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 警告框（Alert）插件</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
body{
font-size:24px;
}
</style>
</head>
<body>
<div class="container">
<h3>警告框（Alert）插件 alert() 方法</h3>
<div id="myAlert" class="alert alert-warning">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="close" data-dismiss="alert">×</a>
<strong>警告！</strong>您的网络连接有问题。
</div>
<script type="text/javascript">
$(function() {
$("div#myAlert").bind('click',function () {
alert("警告消息框被关闭。");
});
});
</script>
</div>
</body>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了基于JavaScript实现的快速排序算法,分析了快速排序的原理并结合实例形式给出了javascript快速排序的操作步骤与相关实现技巧,需要的朋友可以参考下2017-04-04
这篇文章主要分享一个Javascript随机标签云代码实例,需要的朋友可以参考下。2016-06-06
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
这篇文章主要介绍了微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能,结合图文与实例形式详细分析了微信小程序选项卡切换相关操作实现技巧,需要的朋友可以参考下2019-05-05
WebSocket 是一种在 Web 应用程序中实现实时、双向通信的协议,在本文中,我们将深入介绍 WebSocket 的原理、用法以及一些实际应用场景,x需要的可以参考下2023-11-11
这篇文章主要为大家介绍了js混淆加密之jsjiami.v6分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要为大家详细介绍了原生javascript+CSS实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
今天小编就为大家分享一篇layui实现数据表格自定义数据项，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
本文主要介绍了webpack配置完热更新会刷新整个页面,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-11-11
打开新窗口关闭当前页面时总是弹出提示框，有没有办法避免它的弹出呢，答案是可以的接下来为大家分享一个方法可以解决此问题，感兴趣的你可不要错过了哈，希望可以帮助到你2013-03-03
面试题中有一题数组去重，首先想到的是对象存键值的方法可是遇到不同类型又能转换成同样的字符串的就完了接下来为大家介绍下双重循环/存键值和类型实现去重，感兴趣的各位可以参考下哈2013-03-03
最新评论