css + js 超好看的消息提示

先看图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

css 使用了layui,直接在官网下载引入即可

  • 实现的功能
  1. 自定义消息弹出位置
  2. 自定义消息类型
  3. 自定义消息关闭时间
  4. 消息弹出关闭动画
<style>
			.message {
				width: 300px;
				/* background-color: rgba(0, 0, 0, 0.2); */
				background-color: rgba(255, 255, 255, 0.7);
				animation: fadeIn 0.5s ease-out forwards;
			}

			@keyframes fadeIn {
				from {
					opacity: 0;
					transform: translateY(-10px);
				}

				to {
					opacity: 1;
					transform: translateY(0);
				}
			}

			.hide {
				animation: fadeOut 0.5s ease-out forwards;
			}

			@keyframes fadeOut {
				from {
					opacity: 1;
					transform: translateY(0);
				}

				to {
					opacity: 0;
					transform: translateY(-10px);
				}
			}
		</style>
```<body>
		<div class="flex justify-center m">
			<button class="px-2 py text-white bg-info border-0 m" onclick="showMessage('基础', {
				type: 'info',
				place: 'lt',
				time: 1500
			})">基础</button>
			<button class="px-2 py text-white bg-success border-0 m" onclick="showMessage('成功', {
				type: 'success',
				place: 'rt',
				time: 1500
			})">成功</button>
			<button class="px-2 py text-white bg-error border-0 m" onclick="showMessage('失败', {
				type: 'danger',
				place: 'tc',
				time: 1500
			})">失败</button>
			<button class="px-2 py text-white bg-warning border-0 m" onclick="showMessage('警告', {
				type: 'warning',
				place: 'c',
				time: 1500
			})">警告</button>
		</div>
		<script>
			// 显示消息
			function showMessage(message, info = {
				type,
				place,
				time
			}) {
				const type = info.type || 'info',
					fixed = info.place || 'c',
					time = info.time || 1500;

				const messageConfig = {
					success: {
						icon: "layui-icon-ok",
						color: "#4cae4c"
					},
					warning: {
						icon: "layui-icon-tips",
						color: "#f58025"
					},
					danger: {
						icon: "layui-icon-close",
						color: "#FF5733"
					},
					info: {
						icon: "layui-icon-star",
						color: "#007bff"
					}
				}
				
				const classList = {
					messageBox: ['message', 'relative', 'text-center', 'rounded-sm', 'py', 'px-1', 'm-1', 'opacity', 'shadow-sm'],
					iconBox: ['layui-icon', messageConfig[type].icon],
					fixed: {
						lt: {
							box: ['top-0', 'left-0', 'right-0'],
							messageBox: []
						},
						rt: {
							box: ['top-0', 'left-0', 'right-0'],
							messageBox: ['ml-auto']
						},
						lb: {
							box: ['bottom-0', 'left-0', 'right-0'],
							messageBox: []
						},
						rb: {
							box: ['bottom-0', 'left-0', 'right-0'],
							messageBox: ['ml-auto']
						},
						tc: {
							box: ['top-0', 'left-0', 'right-0'],
							messageBox: ['ml-auto', 'mr-auto']
						},
						c: {
							box: ['top-0', 'left-0', 'right-0', 'bottom-0', 'flex', 'justify-center', 'items-center'],
							messageBox: []
						}
					}
				}
				
				// 最外部盒子
				const box = document.createElement('div');
				box.id = 'message_box_mask';
				// 创建外部dom
				const messageBox = document.createElement('div');
				// 然后创建图标dom
				const iconBox = document.createElement('i');
				// 创建消息提示dom
				const textBox = document.createElement('span');
				
				
				box.classList.add('fixed');
				// 给这个div添加基础样式
				classList.messageBox.forEach(e=>{
					messageBox.classList.add(e);
				})
				
				// 为外部div添加消息提示类型的样式
				messageBox.style.color = messageConfig[type].color;
				
				// 添加图标class
				classList.iconBox.forEach(e=>{
					iconBox.classList.add(e);
				})

				// 文本距离图标间距
				textBox.classList.add('ml')
				// 插入文本
				textBox.textContent = message;
				// textBox.innerHTML = message;
				
				// 消息提示定位
				if( classList.fixed[fixed]?.box.length > 0 ) {
					classList.fixed[fixed].box.forEach(e=>{
						box.classList.add(e);
					})
				}
				
				// 判断是否存在消息box样式
				if( classList.fixed[fixed]?.messageBox.length > 0 ) {
					classList.fixed[fixed].messageBox.forEach(e=>{
						messageBox.classList.add(e);
					})
				}

				messageBox.appendChild(iconBox);
				messageBox.appendChild(textBox);
				box.appendChild(messageBox);
				document.body.appendChild(box);
				
				setTimeout(() => {
					hideMessage(box);
				}, time);
			}
			
			// 关闭消息
			function hideMessage(dom = null) {
				const box = dom || document.getElementById('message_box_mask');
				box.lastChild.classList.add('hide');
				setTimeout(() => {
					box.remove();
				}, 500);
			}
		</script>
	</body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/2392.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux - 进程控制(创建和终止)

1.进程创建fork函数初识 在linux中fork函数时非常重要的函数&#xff0c;它从已存在进程中创建一个新进程。新进程为子进程&#xff0c;而原进程为父进程。返回值&#xff1a;子进程返回0&#xff0c;父进程返回子进程id&#xff0c;出错返回-1getpid()获取子进程id&#xff0c…

【Linux】进程优先级 环境变量

进程优先级 环境变量 一、进程优先级1、基本概念2、查看以及修改系统进程的优先级3、一些其他的关于进程优先级的指令和函数调用4、与进程优先级有关的一些进程性质二、环境变量1、基本概念2、和环境变量相关的命令3、Linux中的常见环境变量介绍4、环境变量的组织方式以及在C代…

人脸识别经典网络-MTCNN(含Python源码实现)

人脸检测-mtcnn 本文参加新星计划人工智能赛道&#xff1a;https://bbs.csdn.net/topics/613989052 文章目录人脸检测-mtcnn1. 人脸检测1.1 人脸检测概述1.2 人脸检测的难点1.3 人脸检测的应用场景2. mtcnn2.1 mtcnn概述2.2 mtcnn的网络结构2.3 图像金字塔2.4 P-Net2.5 R-Net2…

蓝桥杯刷题冲刺 | 倒计时20天

作者&#xff1a;指针不指南吗 专栏&#xff1a;蓝桥杯倒计时冲刺 &#x1f43e;马上就要蓝桥杯了&#xff0c;最后的这几天尤为重要&#xff0c;不可懈怠哦&#x1f43e; 文章目录1.铁路与公路2.数字反转3.奖学金4.求阶乘1.铁路与公路 题目 链接&#xff1a; 4074. 铁路与公路…

论文阅读《Point NeRF:Point-based Neural Radiance Fileds》

论文地址&#xff1a;https://arxiv.org/abs/2201.08845 源码地址&#xff1a;https://xharlie.github.io/projects/project_sites/pointnerf 概述 体素神经渲染的方法生成高质量的结果非常耗时&#xff0c;且对不同场景需要重新训练&#xff08;模型不具备泛化能力&#xff09…

多线程 (六) wait和notify

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了 博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点!人生格言&#xff1a;当你的才华撑不起你的野心的时候,你就应该静下心来学习! 欢迎志同道合的朋友一起加油喔&#x1f9be;&am…

Qt实践项目:仿Everything软件实现一个QtEverything

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的在读研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧&#xff0c;喜欢的小伙伴给个三…

九【springboot】

Springboot一 Spring Boot是什么二 SpringBoot的特点1.独立运行的spring项目三 配置开发环境四 配置开发环境五 创建 Spring Boot 项目1.在 IntelliJ IDEA 欢迎页面左侧选择 Project &#xff0c;然后在右侧选择 New Project&#xff0c;如下图2.在新建工程界面左侧&#xff0c…

GPT-4来了!看看她究竟强在哪里!

GPT-4来了&#xff01;OpenAI老板Sam Altman直接开门见山地介绍说&#xff1a;这是我们迄今为止功能最强大的模型&#xff01;GPT-4是一个超大的多模态模型&#xff0c;也就是说&#xff0c;它的输入可以是文字&#xff08;上限2.5万字&#xff09;&#xff0c;还可以是图像。我…

【洛谷刷题】蓝桥杯专题突破-深度优先搜索-dfs(7)

目录 写在前面&#xff1a; 题目&#xff1a;P1596 [USACO10OCT]Lake Counting S - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题目描述&#xff1a; 输入格式&#xff1a; 输出格式&#xff1a; 输入样例&#xff1a; 输出样例&#xff1a; 解题思路&#xff1a; …

list底层的简单实现(万字长文详解!)

list底层的简单实现 文章目录list底层的简单实现list_node的实现&#xff01;list_node的构造函数list的迭代器&#xff01;——重点&#xff01;list迭代器的成员变量迭代器的构造函数* 重载前置 重载后置 重载前置-- 重载后置-- 重载! 重载 重载-- 重载list的const迭代器——…

提高曝光率:外贸网站如何充分利用谷歌优化赢得客户

自从我从事外贸行业以来&#xff0c;谷歌优化一直是我关注的重点。 作为一个外贸从业者&#xff0c;我深知提高网站在谷歌搜索引擎中的排名对企业的重要性。 那么&#xff0c;如何利用谷歌优化来提高外贸网站的曝光率&#xff0c;从而赢得更多客户呢&#xff1f; 以下是我在…

单例模式,饿汉与懒汉

文章目录什么是单例模式单例模式的两种形式饿汉模式懒汉模式懒汉模式与饿汉模式是否线程安全懒汉模式的优化什么是单例模式 单例模式其实就是一种设计模式&#xff0c;跟象棋的棋谱一样&#xff0c;给出一些固定的套路帮助你更好的完成代码。设计模式有很多种&#xff0c;单例…

Ubuntu-C语言下的应用

文章目录一、Ubuntu下C语言的应用&#xff08;一&#xff09;如何使用gedit创建/打开/保存/关闭文件&#xff08;二&#xff09;gedit中相关参数配置&#xff1a;首选项&#xff08;三&#xff09;ubuntu下C语言的编译器 -- gcc一、Ubuntu下C语言的应用 &#xff08;一&#x…

GPIO四种输入和四种输出模式

GPIO的结构图如下所示&#xff1a; 最右端为I/O引脚&#xff0c;左端的器件位于芯片内部。I/O引脚并联了两个用于保护的二极管。 输入模式 从I/O引脚进来就遇到了两个开关和电阻&#xff0c;与VDD相连的为上拉电阻&#xff0c;与VSS相连的为下拉电阻。再连接到TTL施密特触发…

机器学习算法——决策树详解

文章目录前言&#xff1a;决策树的定义熵和信息熵的相关概念信息熵的简单理解经典的决策树算法ID3算法划分选择或划分标准——信息增益ID3算法的优缺点C4.5算法信息增益率划分选择或划分标准——Gini系数&#xff08;CART算法&#xff09;Gini系数计算举例CART算法的优缺点其他…

RK3588平台开发系列讲解(显示篇)DP显示调试方法

平台内核版本安卓版本RK3588Linux 5.10Android 12文章目录 一、查看 connector 状态二、强制使能/禁⽤ DP三、DPCP 读写四、Type-C 接口 Debug五、查看 DP 寄存器六、查看 VOP 状态七、查看当前显示时钟八、调整 DRM log 等级沉淀、分享、成长,让自己和他人都能有所收获!😄…

C++成神之路 | 第一课【步入C++的世界】

目录 一、认识C++ 1.1、关于 C++ 1.2、C++的前世今生 1.2.1、C+

【分享NVIDIA GTC大会干货】与Jetson嵌入式平台工程师的深度挖掘问答

Connect with the Experts: A Deep-Dive Q&A with Jetson Embedded Platform Engineers [CWES52132]NVIDIA Jetson 是世界领先的边缘人工智能计算平台。它具有高性能和低功耗的特点&#xff0c;是机器人、无人机、移动医疗成像和智能视频分析等计算密集型嵌入式应用的理想选…

【蓝桥杯集训·每日一题】AcWing 1051. 最大的和

文章目录一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解三、知识风暴线性DP一、题目 1、原题链接 1051. 最大的和 2、题目描述 对于给定的整数序列 A{a1,a2,…,an}&#xff0c;找出两个不重合连续子段&#xff0c;使得两子段中所有数字的和最…