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

css + js 超好看的消息提示

article 2024/12/23 5:19:54

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

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

实现的功能

自定义消息弹出位置
自定义消息类型
自定义消息关闭时间
消息弹出关闭动画

<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>