Bootstrap JavaScript插件:警告信息 (alert.js)_使用 javascript 来创建一个新的 bootstrap 弹出框(alert)-程序员宅基地

技术标签: # Bootstrap 框架  css  html  bootstrap  typescript  javascript  

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 WangMin

警告框插件(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>

在这里插入图片描述

给关闭按钮添加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('警告提示已关闭');
})

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/WangMinGirl/article/details/108516584

智能推荐

四川大学计算机综合实践报告,四川大学计算机综合实践报告完整版.pdf-程序员宅基地

文章浏览阅读226次。实验一 DEBUG调试工具熟悉、使用一、 实验题目 熟悉、使用 DEBUG调试工具二、 实验日期: 2011/04/15三、 实验目的1. 了解并逐步熟悉汇编语言的编辑方法及特点.2. 复习 8088 汇编语言的段结构、常用的指令与伪指令、存储空间的分配等。3. 掌握汇编语言的编辑、汇编及连接的过程。4. 了解并逐步掌握运用 ..._四川大学高等学历继续教育 (网络教育) 计算机综合实践

计算机会计系统审计的内容包括什么,会计电算化系统审计.docx-程序员宅基地

文章浏览阅读712次。会计电算化系统审计.docxPAGE9 / NUMPAGES9会 计 电 算 化 系 统 审 计摘要:随着科学技术的进步,计算机作为对信息处理最为快捷有效的工具,在会计领域中的运用使会计信息处理有了质的飞跃。特别是会计电算化系统的实施,对审计内容,审计线索,审计风险等各个方便都产生了一系列的影响。本文介绍了电算化系统审计的内容及发展概况,及其产生的影响和存在的风险挑战,最后提出必须采取积极的对策,..._计算机会计信息系统审计工作整体上很复杂,它主要涉及下列领域的知识

react 子组件ref_react 使用 redux 的时候 用 ref获取子组件的state-程序员宅基地

文章浏览阅读388次。由于 redux是无状态的,所以当我们在子组件中使用了 redux的时候,再父组件中,使用 ref 来获取子组件的state时,发现为一个空对象。其实这个是有解决方案法的,原因在于 我们使用的 redux里面的 connect 是有四个参数的前两个经常用,文档也比较多,这里就不说了connect([mapStateToProps], [mapDispatchToProps], [mergePro..._react 通过refs拿到state值是空

JAVA高优先级抢占_在Java中,高优先级的可运行线程会抢占低优先级线程。-程序员宅基地

文章浏览阅读2.4k次。在Java中,高优先级的可运行线程会抢占低优先级线程。答:对谁被恩格斯称为“政治经济学中的马丁·路德”?答:亚当·斯密当前电子对抗已成为战争中不可忽视的措施和手段,以下哪些方面是电子对抗的基本特征?答:炮未打,电子先行 攻防兼备,形态完整 软硬兼施,手段齐全 打击要害,瘫痪神经网状模型和层次模型是的集合答:基本层次联系矛盾发展的不平衡性是指: 主要矛盾与次要矛盾的不平衡|内部矛盾与外部矛盾的..._java中,高优先级线程抢占

%3c大自然的语言%3e竺可桢题目,[转载]16  大自然的语言 竺可桢-程序员宅基地

文章浏览阅读534次。16大自然的语言竺可桢教学目标:1、整体感知课文,能按照要求筛选相关信息并概括文章要点。2、理清文章的说明顺序,探究事理说明文的写作技巧。3、揣摩语言,体会本文语言准确严谨、生动优美的特点,增强语言感悟力。教学重点:1、理清课文的说明顺序,体会说明的条理性,训练学生快速筛选信息,概括内容要点。2、学习本文准确严谨、生动优美的语言,体会说明的生动性。教学难点:理清决定物候现象来临的四个因素的说明顺..._竺可桢演讲稿结束语

java jdbc 批量执行_Java JDBC 批量插入执行时问题-程序员宅基地

文章浏览阅读342次。问题:jdbc批量插入数据是出现死等,无法继续插入数据 ,也不报错 ,也不抛异常使用 :execute执行批量处理publicvoidsave(MapfieldsMap,StringtableName,DBConnectionObjectconnectObj)throwsAppSQLException{MapSaveMap=insertFieldAndCondition..._connection批量执行字段备注

随便推点

ecb gcm java 加密,AES GCM和ECB加密软件,附算法源码和工程文件-程序员宅基地

文章浏览阅读694次。【实例简介】AesTestTool为加密软件,支持GCM 和 ECB两种模式 128bit秘钥GCM算法是一个C++工程,“C++gcm算法工程”目录里面有源码加密软件是用C#写的,所以把C++工程编译成了dll文件,由C#调用“软件工程目录”文件夹是AesTestTool的源码因为在实际工程应用中使用到了AES GCM和ECB两种算法,所以写了一个小软件用于测试,实测GCM加密解密、GMAC算法..._c++实现gcm安全算法

python global 跨文件,python实现跨文件全局变量的方法-程序员宅基地

文章浏览阅读676次。在使用Python编写的应用的过程中,有时候会遇到多个文件之间传递同一个全局变量的情况。本文就此给出了如下的解决方法供大家参考。文件1:globalvar.py#!/usr/bin/env python2.7 class GlobalVar: db_handle = None mq_client = None def set_db_handle(db): GlobalVar.db_ha..._python global 跨文件

akb48_爷青结!AKB48前神七成员板野友美结婚!-程序员宅基地

文章浏览阅读677次。日本女子偶像组合AKB48的人气鼻祖级“神7”成员之一,板野友美今天突然宣布结婚,消息一出立即震惊一众日本及海外粉丝。据日本多家媒体报道,板野友美丈夫为棒球员高桥奎二,效力于东京益力多燕子,在队中担任投手,被日媒封为“翻版竹野内丰”。29岁的板野友美与23岁的东京养乐多燕子队投手高桥奎二步入婚姻殿堂。而对于两人的相识,日本媒体表示,“两人是在2019年春天通过共同朋友认识的,从去年开始交..._渡边麻友结婚

远程服务器断开不注销,能不能不自动注销!断开win2003远程桌面之后如何保留操作设置...-程序员宅基地

文章浏览阅读1.3k次。在使用win2003系统的用户中,有些因为工作的需求,需要对另一台win2003系统进行远程连接操作,这样的远程方便了很多操作,但是问题就出来了,只要推出远程桌面后,系统就自动注销了里面的操作设置,实在很无语。该怎么做才能不让系统自动注销呢?解决办法如下:开始-->运行-->gpedit.msc计算机配置->管理模板->Windows组件->终端服务->会话把"..._服务器多用户断开用户不被注销

html5 video 接口,html5之video(audio)api-程序员宅基地

文章浏览阅读657次。背景在html4时代实现播放音频和视频的方法在html5时代实现的方案##video##audio你的浏览器不支持audio元素公共属性src:指定媒体数据的srcautoplay: 是否在页面加载完毕之后自动播放preload:none/metadata/auto :表示是否进行预加载none: 表示不进行预加载metadata:表示只预加载媒体的元数据auto:使用方法 preload="au..._html5 video标签 下载api

JAVA报表之JasperReport+iReport5.6 Subreport子报表的实现(四)_java中子表的用法-程序员宅基地

文章浏览阅读5.5k次,点赞2次,收藏9次。Subreport子报表首先需要知道主子报表之间的关系,根据主表的ID作为条件来查找出子表中与主表相关的信息,并显示出来。难点一:父报表往子报表传送参数难点二:父报表接受子报表(subreport)的返回值下图为数据库中的主表和字表:新建一个父报表,如下图所示:在主报表下放置子报表,如图所示:子报表建立好后如下图所示:定父报表中的参数:在父报表中传参数:在子报表中接收参数时,需要先在子报表中定义一..._java中子表的用法

推荐文章

热门文章

相关标签