html下自动消失的提示框jQuery实现
引言
- 最近在找一个可以自动消失的提示框,找来找去,找到了这个:提示框设置_html页面提示框等待一定时间消失
- 博主写得很好,可以直接复制运行出来,我也从中得以受益。
- 本篇文章对这篇博客的代码做了一些小的更新:
- 修复拼写错误
- 去掉无关的样式引用(
bootstrap.min.js和bootstrap.min.js)
完整代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Bootstrap Example</title><meta name="viewport" content="width=device-width, initial-scale=1"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><style>.alert-prompt {background: rgba(0, 0, 0, 0.8);color: #fff;}.alert-success {color: #3c763d;background-color: #dff0d8;border-color: #d6e9c6}.alert-info {color: #31708f;background-color: #d9edf7;border-color: #bce8f1}.alert-warning {color: #8a6d3b;background-color: #fcf8e3;border-color: #faebcc}.alert-danger {color: #a94442;background-color: #f2dede;border-color: #ebccd1}</style>
</head><body><div class="container"><h4>模拟数据查询,查询失败显示一个模态框,1.2秒后自动消失</h4><button type="button" class="btn" onclick="test('alert-danger')">查询失败</button><button type="button" class="btn" onclick="test('alert-success')">成功</button><button type="button" class="btn" onclick="test('alert_warning')">警告</button><button type="button" class="btn" onclick="test('alert_info')">信息提示</button><button type="button" class="btn" onclick="test('alert_info2')">信息提示2</button></div><script>function test(str) {switch (str) {case "alert-success": success_prompt("提交成功"); break;case "alert_warning": warning_prompt("错误警告"); break;case "alert-danger": fail_prompt("提交失败"); break;case "alert_info": info_prompt("未查询到数据"); break;default: alert_prompt("未查询到数据");}}/*** 弹出式提示框,默认1.2秒自动消失* @param message 提示信息* @param style 提示样式,有alert-success、alert-danger、alert-warning、alert-info* @param time 消失时间*/var prompt = function (message, style, time) {style = (style === undefined) ? 'alert-success' : style;time = (time === undefined) ? 1200 : time;$('<div id="promptModal">').appendTo('body').addClass('alert ' + style).css({"display": "block","z-index": 99999,"left": ($(document.body).outerWidth(true) - 120) / 2,"top": ($(window).height() - 45) / 2,"position": "absolute","padding": "20px","border-radius": "5px"}).html(message).show().delay(time).fadeOut(10, function () {$('#promptModal').remove();});};// 成功提示var success_prompt = function (message, time) {prompt(message, 'alert-success', time);};// 失败提示var fail_prompt = function (message, time) {prompt(message, 'alert-danger', time);};// 提醒var warning_prompt = function (message, time) {prompt(message, 'alert-warning', time);};// 信息提示var info_prompt = function (message, time) {prompt(message, 'alert-info', time);};// 信息提示var alert_prompt = function (message, time) {prompt(message, 'alert-prompt', time);};</script>
</body></html>
注意[1]
- 这种方式在与window.location.reload() 同时使用时,会造成提示框提示短暂时间就会被页面刷新,这种情况可以使用setTimeout()方法,设置页面在一段时间后进行刷新。例如:
success_prompt("提交成功"); setTimeout("window.location.reload()",1200);
参考资料
[1] 提示框设置_html页面提示框等待一定时间消失
相关文章:
html下自动消失的提示框jQuery实现
引言 最近在找一个可以自动消失的提示框,找来找去,找到了这个:提示框设置_html页面提示框等待一定时间消失博主写得很好,可以直接复制运行出来,我也从中得以受益。本篇文章对这篇博客的代码做了一些小的更新ÿ…...
第27篇:Java日期处理总结(一)
目录 1、Date类 1.1 如何实例化Date对象 1.2 Date相关操作方法 1.3 如何获取当前日期...
Linux入门教程——VI/VIM 编辑器
前言 本文小新为大家带来 Linux入门教程——VI/VIM 编辑器 相关知识,具体内容包括VI/VIM是什么,VIM的三种工作模式介绍,包括:一般模式,编辑模式,指令模式,以及模式间转换等进行详尽介绍~ 不积跬…...
第十四届蓝桥杯三月真题刷题训练——第 10 天
目录 第 1 题:裁纸刀 问题描述 运行限制 代码: 第 2 题:刷题统计 问题描述 输入格式 输出格式 样例输入 样例输出 评测用例规模与约定 运行限制 代码: 第 3 题:修建灌木 问题描述 输入格式 输出格式 …...
软件测试之jira
Jira 1. Jira 概述 JIRA 是澳大利亚 Atlassian 公司开发的一款优秀的问题跟踪管理软件工具,可以对各种类型的问题进行跟踪管理,包括缺陷、任务、需求、改进等。JIRA采用J2EE技术,能够跨平台部署。它正被广泛的开源软件组织,以及…...
传统方式实现SpringMVC
一、初次尝试SpringMVC 1.1、在pom.xml中添加依赖 <dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>4.2.6.RELEASE</version></dependency><dependency><grou…...
RS232/RS485信号接口转12路模拟信号 隔离D/A转换器LED智能调光控制
特点:● RS-485/232接口,隔离转换成12路标准模拟信号输出● 可选型输出4-20mA或0-10V控制其他设备● 模拟信号输出精度优于 0.2%● 可以程控校准模块输出精度● 信号输出 / 通讯接口之间隔离耐压3000VDC ● 宽电源供电范围:10 ~ 30VDC● 可靠…...
聊一聊代码重构——封装集合和替换算法的代码实践
代码重构相关内容 聊一聊代码重构——我们为什么要代码重构 聊一聊代码重构——代码中究竟存在哪些坏代码 聊一聊代码重构——关于变量的代码实践 聊一聊代码重构——关于循环逻辑的代码实践 聊一聊代码重构——关于条件表达式的代码实践 聊一聊代码重构——程序方法上的…...
FPGA解码4K分辨率4line MIPI视频 OV13850采集 提供工程源码和技术支持
目录1、前言2、Xilinx官方主推的MIPI解码方案3、纯Vhdl方案解码MIPI4、vivado工程介绍5、上板调试验证6、福利:工程代码的获取1、前言 FPGA图像采集领域目前协议最复杂、技术难度最高的应该就是MIPI协议了,MIPI解码难度之高,令无数英雄竞折腰…...
Map接口及遍历方式
1、Map接口实现类的特点1)Map与Collection并列存在。用于保存具有映射关系的数据:Key-Value(无序)2) Map中的key和value可以是任何引用类型的数据,会封装到HashMap$Node对象中3) Map 中的key不允许重复import java.util.HashMap; import java…...
一步步构建自己的前端项目
一、我们先把webpack走通 1、先安装相关依赖,webpack是用来处理命令行参数的,但是我不准备使用webpack-cli,但是还是要求必须安装webpack-cli npm install webapck webpack-cli --save-dev2、npm init -y 3、创建项目结构 build.js cons…...
VMware搭建Mac OS环境
推荐阅读 Proxifier逆向分析(Mac) MacOS Burp2021安装配置 突破iOS App双向认证抓包 App绕过iOS手机的越狱检测 iOS系统抓包入门实践之短链 各种学习环境更新MacOS虚拟机 Android和iOS静态代码扫描工具 iOS系统抓包之短链-破解双向证书 Android和iOS应用源码的静态分析…...
【Maven】什么是Maven?Maven有什么用?
目录 一、什么是 Maven 二、Maven 能解决什么问题 三、Maven 的优势举例 四、Maven 的两个经典作用 4.1 Maven 的依赖管理 4. 2 项目的一键构建 💟 创作不易,不妨点赞💚评论❤️收藏💙一下 一、什么是 Maven Maven 的正确发…...
【JavaSE】类和对象的详解
前言: 大家好,我还是那个不会打拳的程序猿。今天我给大家讲解的是类和对象,相信大家在之前的学习中都是面向过程的思想,那么今天就让我们走向面向对象的世界吧。 目录 1.面向过程VS面向对象 1.1什么是面向过程 1.2什么是面向对…...
2023年中职组“网络安全”赛项广西自治区竞赛任务书
2023年中职组“网络安全”赛项 广西自治区竞赛任务书 一、竞赛时间 总计:360分钟 需求环境可私信博主!点个赞加三连吧! 二、竞赛阶段 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 A、B模块 A-1 登录安全加固 180分钟 200分 A-2…...
简单的自定义录屏工具
在csdn上写文章,需要配一些操作动态图,需要针对电脑录屏,可能是整个屏幕录屏,也可能是某窗口,甚至是某一小块区域。 动态图最好是gif格式,方便直接嵌入文章中。 一、设计 窗口类widget 切屏类Capturescr…...
数据结构与算法基础(王卓)(17):KMP算法详解(精讲(最简单、直接、有效的思路方法,答案以及代码原理)
本文具体思路参考: (最后证明,该教材/网课实际上是最有效的) DS第四章【3】KMP1_哔哩哔哩_bilibili 中间走的一些弯路的教材: 第06周05--第4章串、数组和广义表5-4.3串的操作--串的匹配算法2--KMP算法_哔哩哔哩_bi…...
【java基础】HashMap源码解析
文章目录基础说明构造器put方法(无扩容,无冲突)put方法(无冲突,有扩容)put方法(有冲突,无树化)put方法(有冲突,树化)remove方法&#…...
实现异步的8种方式,你知道几个?
一、前言 在编程中,有时候我们需要处理一些费时的操作,比如网络请求、文件读写、数据库操作等等,这些操作会阻塞线程,等待结果返回。为了避免阻塞线程、提高程序的并发处理能力,我们常常采用异步编程。 异步编程是一种…...
二叉树的三种遍历
二叉树的遍历可以有:先序遍历、中序遍历、后序遍历先序遍历:根、左子树,右子树中序遍历:左子树、根、右子树后序遍历:左子树、右子树、根下面是我画图理解三种遍历:二叉树里都是分为左子树和右子树。分治思…...
数据库测试的盲区:用AI生成边界值,发现隐藏的数据异常
在软件测试领域,数据库层的质量保障常常陷入一种“平静的假象”——核心CRUD操作通过、索引命中率达标、慢查询被优化,一切看似井然有序。然而线上事故统计却揭示了一个残酷的事实:超过七成的数据库相关故障并非源于架构缺陷或性能瓶颈&#…...
MCP协议专用Linter:mcp-lint工具的设计、规则与集成实践
1. 项目概述:一个为MCP协议量身定制的代码质量守护者 最近在折腾MCP(Model Context Protocol)相关的开发,发现一个挺有意思的项目: robert19001-cmyk/mcp-lint 。光看名字,你大概能猜到它是个代码检查工具…...
Vivado时序约束实战:输入/输出延时设置背后的时序模型与设计考量
1. 时序约束的本质:从理论到实践的桥梁 刚接触FPGA设计时,我最头疼的就是时序约束。那些建立时间、保持时间的概念看得人云里雾里,更别说要在Vivado里实际设置了。直到有一次项目因为时序问题导致整板无法工作,我才真正明白时序约…...
QMC-Decoder深度解析:解锁QQ音乐加密音频的高效实战指南
QMC-Decoder深度解析:解锁QQ音乐加密音频的高效实战指南 【免费下载链接】qmc-decoder Fastest & best convert qmc 2 mp3 | flac tools 项目地址: https://gitcode.com/gh_mirrors/qm/qmc-decoder 在数字音乐版权保护日益严格的今天,你是否曾…...
别再死磕A的逆了!聊聊矩阵的‘备胎’:广义逆A-与A+在Python/Numpy里怎么算?
别再死磕A的逆了!聊聊矩阵的‘备胎’:广义逆A-与A在Python/Numpy里怎么算? 遇到非方阵或病态矩阵时,传统逆矩阵就像突然失联的前任——完全派不上用场。这时候广义逆矩阵(A-和A)就像靠谱的备胎,…...
从USB3.2到PCIe 5.0:我的高速串行链路阻抗匹配踩坑实录(附Sigrity仿真文件)
从USB3.2到PCIe 5.0:我的高速串行链路阻抗匹配踩坑实录 去年负责一款数据中心加速卡的设计时,我遇到了职业生涯中最棘手的高速信号完整性问题。这块板卡需要同时支持PCIe 5.0 x16和四个USB3.2 Gen2x2接口,当第一批工程样机回来进行信号测试时…...
告别手动拼报文!用MQTT.fx和OneNet平台快速调试你的ESP8266物联网设备
用MQTT.fx与OneNet构建高效物联网调试工作流 调试物联网设备时,你是否厌倦了反复修改代码、烧录固件、查看串口日志的循环?当ESP8266与OneNet平台通信异常时,传统调试方式往往让我们陷入二进制报文的泥潭。本文将介绍如何通过MQTT.fx这款图形…...
Cadence AMS Designer 保姆级教程:手把手教你搞定数模混合仿真(含Verilog模块导入避坑指南)
Cadence AMS Designer 保姆级教程:手把手教你搞定数模混合仿真(含Verilog模块导入避坑指南) 数模混合仿真一直是芯片设计中的关键环节,尤其对于刚接触Cadence环境的新手工程师或在校学生来说,从零开始搭建混合仿真环境…...
Claude技能生态构建指南:从Awesome清单到实战开发
1. 项目概述:为什么我们需要一个“Claude技能”的Awesome清单?如果你最近也在深度使用Claude,尤其是Claude Desktop或者API,你可能会和我有一样的感受:这家伙的能力边界,似乎每天都在被开发者们用各种“技能…...
CANN/asc-devkit bfloat16转half API
__bfloat162half_ru 【免费下载链接】asc-devkit 本项目是CANN 推出的昇腾AI处理器专用的算子程序开发语言,原生支持C和C标准规范,主要由类库和语言扩展层构成,提供多层级API,满足多维场景算子开发诉求。 项目地址: https://git…...
