当前位置： 首页 > news >正文

html下自动消失的提示框jQuery实现

news 文章来源：https://blog.csdn.net/shiwanghualuo/article/details/129501447 2025/1/17 21:37:47

引言

  • 最近在找一个可以自动消失的提示框，找来找去，找到了这个：提示框设置_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实现

引言 最近在找一个可以自动消失的提示框&#xff0c;找来找去&#xff0c;找到了这个&#xff1a;提示框设置_html页面提示框等待一定时间消失博主写得很好&#xff0c;可以直接复制运行出来&#xff0c;我也从中得以受益。本篇文章对这篇博客的代码做了一些小的更新&#xff…...

编程日记 2023/3/13 19:52:40

第27篇：Java日期处理总结（一）

目录 1、Date类 1.1 如何实例化Date对象 1.2 Date相关操作方法 1.3 如何获取当前日期...

编程日记 2023/3/13 19:47:39

Linux入门教程——VI/VIM 编辑器

前言 本文小新为大家带来 Linux入门教程——VI/VIM 编辑器 相关知识&#xff0c;具体内容包括VI/VIM是什么&#xff0c;VIM的三种工作模式介绍&#xff0c;包括&#xff1a;一般模式&#xff0c;编辑模式&#xff0c;指令模式&#xff0c;以及模式间转换等进行详尽介绍~ 不积跬…...

编程日记 2023/3/13 19:42:36

第十四届蓝桥杯三月真题刷题训练——第 10 天

目录 第 1 题&#xff1a;裁纸刀 问题描述 运行限制 代码&#xff1a; 第 2 题&#xff1a;刷题统计 问题描述 输入格式 输出格式 样例输入 样例输出 评测用例规模与约定 运行限制 代码&#xff1a; 第 3 题&#xff1a;修建灌木 问题描述 输入格式 输出格式 …...

编程日记 2023/3/13 19:37:35

软件测试之jira

Jira 1. Jira 概述 JIRA 是澳大利亚 Atlassian 公司开发的一款优秀的问题跟踪管理软件工具&#xff0c;可以对各种类型的问题进行跟踪管理&#xff0c;包括缺陷、任务、需求、改进等。JIRA采用J2EE技术&#xff0c;能够跨平台部署。它正被广泛的开源软件组织&#xff0c;以及…...

编程日记 2023/3/13 19:32:34

传统方式实现SpringMVC

一、初次尝试SpringMVC 1.1、在pom.xml中添加依赖 <dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>4.2.6.RELEASE</version></dependency><dependency><grou…...

编程日记 2023/3/13 19:27:32

RS232/RS485信号接口转12路模拟信号 隔离D/A转换器LED智能调光控制

特点&#xff1a;● RS-485/232接口&#xff0c;隔离转换成12路标准模拟信号输出● 可选型输出4-20mA或0-10V控制其他设备● 模拟信号输出精度优于 0.2%● 可以程控校准模块输出精度● 信号输出 / 通讯接口之间隔离耐压3000VDC ● 宽电源供电范围&#xff1a;10 ~ 30VDC● 可靠…...

编程日记 2023/3/13 19:17:27

聊一聊代码重构——封装集合和替换算法的代码实践

代码重构相关内容 聊一聊代码重构——我们为什么要代码重构 聊一聊代码重构——代码中究竟存在哪些坏代码 聊一聊代码重构——关于变量的代码实践 聊一聊代码重构——关于循环逻辑的代码实践 聊一聊代码重构——关于条件表达式的代码实践 聊一聊代码重构——程序方法上的…...

编程日记 2023/3/13 19:12:24

FPGA解码4K分辨率4line MIPI视频 OV13850采集 提供工程源码和技术支持

目录1、前言2、Xilinx官方主推的MIPI解码方案3、纯Vhdl方案解码MIPI4、vivado工程介绍5、上板调试验证6、福利&#xff1a;工程代码的获取1、前言 FPGA图像采集领域目前协议最复杂、技术难度最高的应该就是MIPI协议了&#xff0c;MIPI解码难度之高&#xff0c;令无数英雄竞折腰…...

编程日记 2023/3/13 19:07:21

Map接口及遍历方式

1、Map接口实现类的特点1)Map与Collection并列存在。用于保存具有映射关系的数据:Key-Value&#xff08;无序&#xff09;2) Map中的key和value可以是任何引用类型的数据&#xff0c;会封装到HashMap$Node对象中3) Map 中的key不允许重复import java.util.HashMap; import java…...

编程日记 2023/3/13 19:02:17

一步步构建自己的前端项目

一、我们先把webpack走通 1、先安装相关依赖&#xff0c;webpack是用来处理命令行参数的&#xff0c;但是我不准备使用webpack-cli&#xff0c;但是还是要求必须安装webpack-cli npm install webapck webpack-cli --save-dev2、npm init -y 3、创建项目结构 build.js cons…...

编程日记 2023/3/13 18:57:15

VMware搭建Mac OS环境

推荐阅读 Proxifier逆向分析(Mac) MacOS Burp2021安装配置 突破iOS App双向认证抓包 App绕过iOS手机的越狱检测 iOS系统抓包入门实践之短链 各种学习环境更新MacOS虚拟机 Android和iOS静态代码扫描工具 iOS系统抓包之短链-破解双向证书 Android和iOS应用源码的静态分析…...

编程日记 2023/3/13 18:52:10

【Maven】什么是Maven？Maven有什么用？

目录 一、什么是 Maven 二、Maven 能解决什么问题 三、Maven 的优势举例 四、Maven 的两个经典作用 4.1 Maven 的依赖管理 4. 2 项目的一键构建 &#x1f49f; 创作不易&#xff0c;不妨点赞&#x1f49a;评论❤️收藏&#x1f499;一下 一、什么是 Maven Maven 的正确发…...

编程日记 2023/3/13 18:47:08

【JavaSE】类和对象的详解

前言&#xff1a; 大家好&#xff0c;我还是那个不会打拳的程序猿。今天我给大家讲解的是类和对象&#xff0c;相信大家在之前的学习中都是面向过程的思想&#xff0c;那么今天就让我们走向面向对象的世界吧。 目录 1.面向过程VS面向对象 1.1什么是面向过程 1.2什么是面向对…...

编程日记 2023/3/13 18:42:05

2023年中职组“网络安全”赛项广西自治区竞赛任务书

2023年中职组“网络安全”赛项 广西自治区竞赛任务书 一、竞赛时间 总计&#xff1a;360分钟 需求环境可私信博主&#xff01;点个赞加三连吧&#xff01; 二、竞赛阶段 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 A、B模块 A-1 登录安全加固 180分钟 200分 A-2…...

编程日记 2023/3/13 18:37:03

简单的自定义录屏工具

在csdn上写文章&#xff0c;需要配一些操作动态图&#xff0c;需要针对电脑录屏&#xff0c;可能是整个屏幕录屏&#xff0c;也可能是某窗口&#xff0c;甚至是某一小块区域。 动态图最好是gif格式&#xff0c;方便直接嵌入文章中。 一、设计 窗口类widget 切屏类Capturescr…...

编程日记 2023/3/16 14:55:35

数据结构与算法基础（王卓）（17）：KMP算法详解（精讲（最简单、直接、有效的思路方法，答案以及代码原理）

本文具体思路参考&#xff1a; &#xff08;最后证明&#xff0c;该教材/网课实际上是最有效的&#xff09; DS第四章【3】KMP1_哔哩哔哩_bilibili 中间走的一些弯路的教材&#xff1a; 第06周05--第4章串、数组和广义表5-4.3串的操作--串的匹配算法2--KMP算法_哔哩哔哩_bi…...

编程日记 2023/3/13 18:02:40

【java基础】HashMap源码解析

文章目录基础说明构造器put方法&#xff08;无扩容&#xff0c;无冲突&#xff09;put方法&#xff08;无冲突&#xff0c;有扩容&#xff09;put方法&#xff08;有冲突&#xff0c;无树化&#xff09;put方法&#xff08;有冲突&#xff0c;树化&#xff09;remove方法&#…...

编程日记 2023/3/13 17:57:35

实现异步的8种方式，你知道几个？

一、前言 在编程中&#xff0c;有时候我们需要处理一些费时的操作&#xff0c;比如网络请求、文件读写、数据库操作等等&#xff0c;这些操作会阻塞线程&#xff0c;等待结果返回。为了避免阻塞线程、提高程序的并发处理能力&#xff0c;我们常常采用异步编程。 异步编程是一种…...

编程日记 2023/3/13 17:52:33

二叉树的三种遍历

二叉树的遍历可以有&#xff1a;先序遍历、中序遍历、后序遍历先序遍历&#xff1a;根、左子树&#xff0c;右子树中序遍历&#xff1a;左子树、根、右子树后序遍历&#xff1a;左子树、右子树、根下面是我画图理解三种遍历&#xff1a;二叉树里都是分为左子树和右子树。分治思…...

编程日记 2023/3/13 17:47:32

我，30岁程序员被裁了，千万别干全栈

大家好&#xff0c;这里是程序员晚枫&#xff0c;今天是读者投稿。下面开始我们的正文。&#x1f447; 关注博主&#x1f449;程序员晚枫 很久了&#xff0c;今天给大家分享一下我从事程序员后&#xff0c;30岁被裁的经历&#xff0c;希望帮到有需要的人。 1、我被裁了 大家好…...

编程日记 2023/3/13 17:42:30

【linux】：进程地址空间

文章目录 前言一、进程地址空间总结前言 本篇文章接着上一篇文章继续讲解进程&#xff0c;主要讲述了进程在运行过程中是如何在内存中被读取的以及为什么要有虚拟地址的存在&#xff0c;CPU在运行过程中是拿到程序的虚拟地址还是真实的物理内存。 一、进程地址空间 下面我们先…...

编程日记 2023/3/13 17:37:29

【保姆级】JMeter Mqtt 压测配置

忽然有个紧急任务要对某个服务做MQTT做压测&#xff0c;紧急实操下JMeter&#xff0c;这里记录下非专业测试员的测试过程、(▽&#xff40;)&#xff0c;欢迎&#x1f44f;大家检查指点(&#xffe3;∇&#xffe3;)/下载⏬工具JMeter官方下载地址https://jmeter.apache.org/do…...

编程日记 2023/3/13 17:32:27

C语言数据结构初阶(4)----带头双向循环链表

我们先来看看带头双向循环链表的结构&#xff1a;看到这里我们可能会产生一个想法&#xff1a;这个链表看起来好复杂的样子&#xff0c;是不是它的增删改查比单链表更难写呢&#xff1f;嘿嘿&#xff0c;还真的不是这样的&#xff0c;双向链表的增删改查是很好写的哦&#xff0…...

编程日记 2023/3/13 17:27:24

原生javascript手写一个丝滑的轮播图

通过本文&#xff0c;你将学到: htmlcssjs 没错&#xff0c;就是html&#xff0c;css,js,现在是框架盛行的时代&#xff0c;所以很少会有人在意原生三件套&#xff0c;通过本文实现一个丝滑的轮播图&#xff0c;带你重温html,css和js基础知识。 为什么选用轮播图做示例&…...

编程日记 2023/3/13 17:22:22

【Linux】进程优先级（进程优先级 Linux下优先级 用top命令更改已存在进程的nice 其他概念 进程切换）

文章目录进程优先级Linux下优先级用top命令更改已存在进程的nice&#xff1a;其他概念进程切换进程优先级 我们作为使用者一般不关心优先级&#xff0c;它跟我们的调度器有很大的关系&#xff0c;调度器是为了跟均衡的调度进程。 什么叫做优先级&#xff1f; 优先级和权限是两…...

编程日记 2023/3/13 17:17:21

2016年chatGPT之父Altman与马斯克的深度对话（值得一看）

2016年9月&#xff0c;现今OpenAI CEO&#xff0c;ChatGPT之父&#xff0c;时任创投公司Y Combinator的总裁Sam Altman在特斯拉加州弗里蒙特工厂采访了埃隆马斯克。马斯克阐述了创建OpenAI的初衷&#xff0c;以及就他而言&#xff0c;对于未来最为重要的五件事。这是OpenAI的两…...

编程日记 2023/3/13 17:12:17

基于vscode开发vue3项目的详细步骤教程 3 前端路由vue-router

1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客 4、基于vscode开发vue项目的详细步骤教程 2 第三方图标库FontAw…...

编程日记 2023/3/13 17:07:14

【C语言】每日刷题 —— 牛客语法篇（5）

前言 大家好&#xff0c;继续更新专栏 c_牛客&#xff0c;不出意外的话每天更新十道题&#xff0c;难度也是从易到难&#xff0c;自己复习的同时也希望能帮助到大家&#xff0c;题目答案会根据我所学到的知识提供最优解。 &#x1f3e1;个人主页&#xff1a;悲伤的猪大肠9的博…...

编程日记 2023/3/13 17:02:12

操作系统(2.1)--进程的描述与控制

目录 一、前驱图和程序执行 1.前驱图 2.程序顺序执行 2.1 程序的顺序执行 2.2 程序顺序执行时的特征 3. 程序并发执行 3.1程序的并发执行 3.2 程序并发执行时的特征 一、前驱图和程序执行 1.前驱图 前趋图:是一个有向无循环图&#xff0c;用于描述进程之间执行的前后…...

编程日记 2023/3/13 16:57:10

wordpress pdf阅读器/引擎搜索是什么意思

标志设计的定义是什么&#xff1f; 标志是一种具有象征性的大众传播符号,它以精练的形象表达一定的涵义,并借助人们的符号识别,联想等思维能力,传达特定的信息.标志传达信息的功能很强,在一定条件下,甚至超过语言文字,因此它被广泛应用于现代社会的各个方面,同时,现代标志设计也…...

编程日记 2025/1/17 21:16:08

杭州萧山网站建设/电商平台链接怎么弄

DataInputStream 是数据输入流。它继承于FilterInputStream。DataInputStream 是用来装饰其它输入流&#xff0c;它“允许应用程序以与机器无关方式从底层输入流中读取基本 Java 数据类型”。应用程序可以使用DataOutputStream(数据输出流)写入由DataInputStream(数据输入流)读…...

编程日记 2025/1/17 20:24:29

出售自己的网站/在线外链推广

记得看到一片文章中说要学习linux 不要用kali。。不感兴趣的东西&#xff0c;还指望我去搞个Ubuntu。。。。CtrlI 清屏CD命令&#xff1a;cd 进入用户主目录&#xff1b;cd ~ 进入用户主目录&#xff1b;cd - 返回进入此目录之前所在的目录&#xff1b;cd .. 返回上级目录(若当…...

编程日记 2025/1/17 17:18:12

无锡高端网站建设公司哪家好/楚雄今日头条新闻

题意 题目链接 Sol 比较套路吧&#xff0c;设\(f[i][j]\)表示以\(i\)为根的子树中选了\(j\)个黑点对答案的贡献 然后考虑每条边的贡献&#xff0c;边的两边的答案都是可以算出来的 转移的时候背包一下。 #include<bits/stdc.h> #define Pair pair<int, int> #defin…...

编程日记 2025/1/17 15:49:00

如何建立一个论坛网站/游戏推广合作平台

为什么80%的码农都做不了架构师&#xff1f;>>> 目录结构: ./3party/ ├── Makefile ├── outlib └── src├── pkg│ ├── http-parser-2.7.1.tar.gz│ ├── jansson-2.9.tar.gz│ ├── json2pb-master-master.zip│ ├── libbacktrace-m…...

编程日记 2025/1/17 15:04:41

杭州建设职业学校网站/公司网站如何制作

朋友们&#xff0c;如需转载请标明出处&#xff1a;https://blog.csdn.net/jiangjunshow 声明&#xff1a;在人工智能技术教学期间&#xff0c;不少学生向我提一些python相关的问题&#xff0c;所以为了让同学们掌握更多扩展知识更好地理解AI技术&#xff0c;我让助理负责分享…...

编程日记 2025/1/17 13:24:08