Bootstrap JavaScript插件:警告信息 (alert.js)

简介: Bootstrap 框架

作者:WangMin
格言:努力做好自己喜欢的每一件事

banner.png

警告框插件(alert.js)为警告框组件一个关闭功能,就是点击警告框的关闭按钮,可以让警告框消失,并将它从 DOM 中删除。

使用方法

1. 通过data属性关闭警告框

为警告框添加一个可选的.alert-dismissible类和一个关闭按钮,就可以为警告框组件提供关闭功能。关闭按钮可以使用.close的任何元素定义,不管什么元素都必须使用.close类,并包含data-dismiss="alert"属性,.close类用于显示 '×' 符号,data-dismiss属性用来执行关闭动作。如果希望警告框在关闭时表现出动画效果,还可以为它添加.fade.in类。

<div class="alert alert-warning alert-dismissable fade in">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>警告</strong>请先进行检查
</div>

1.png

给关闭按钮添加data-dismiss="alert"属性后,无需任何JavaScript代码,就可以自动为警告框赋予关闭功能。点击警告框的 '×' 符号,就可以关闭警告框。

2. 可以通过JavaScript关闭警告框

你也可以通过JavaScript为某个警告框添加关闭功能,使用JavaScript方式,就不需要为关闭按钮添加data-dismiss="alert"属性。

<div class="alert alert-warning alert-dismissable fade in">
    <button type="button" class="close">&times;</button>
    <strong>警告</strong>请先进行检查
</div>
$(function() {
   
   
  $(".close").click(function(){
   
   
    $(".alert").alert('close');
  });
});

现在点击警告框的 '×' 符号,同样可以将它关闭并从 DOM 中删除。如果警告框被赋予了.fade.in类,则在淡出之后才会被删除。


警告框插件的事件

事件 含义
close.bs.alert close方法被调用后,立即触发该事件
closed.bs.alert 当警告框已经被关闭(会等待过渡效果执行结束)之后,触发该事件
$('#box').on('closed.bs.alert',function(){
   
   
    alert('警告提示已关闭');
})

就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
|
6月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
299 24
|
9月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
297 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
8月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
182 32
|
8月前
|
JavaScript 前端开发 API
纯js轻量级页面顶部Loading进度条插件
纯js轻量级页面顶部Loading进度条插件
|
8月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
11月前
|
资源调度 前端开发 JavaScript
Bootstrap日期选择器插件bootstrap-datepicker
Bootstrap日期选择器插件bootstrap-datepicker
993 12
|
11月前
|
JavaScript 前端开发
基于SVG的js圆形菜单插件
这是一款基于SVG的js圆形菜单插件。该js圆形菜单插件可以生成漂亮的圆形菜单效果,支持二级菜单,支持使用鼠标滚动切换菜单
191 16