html+css+js实现Notification 通知

实现效果:

代码实现:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Notification 通知</title><style>*{padding: 0;margin: 0;box-sizing: border-box;}.source{display: flex;margin-top: 50px;margin-left: 50px;width: 870px;height: 80px;padding: 24px;border: 1px solid #ecf5ff;}button{width: 110px;height:40px;margin-right: 20px;color: #606266;border: 1px solid #c0c4cc;background-color: #fff;border-radius: 3px;}button:hover{border: 1px solid #409eff;color:#409eff ;}button.active{border: 1px solid #409eff;color:#409eff ;}.modal-container {position: fixed;top: 20px;right: 20px;width: 330px;}.modal{width: 330px;border: 1px solid #c0c4cc;padding: 14px 24px 14px 18px;border-radius: 5px;margin-bottom: 14px;transform: translateX(350px);transition: transform 0.3s ease-in-out;}.open{transform: translateX(0);}.modal .header{display: flex;justify-content: space-between;font-weight: 700;font-size: 16px;color: #303133;padding-bottom: 5px;}i{cursor: pointer;font-style: normal;font-weight: 300;color: #606266;}.modal .footer{color: #606266;font-size: 14px;}</style>
</head>
<body><div class="source"><button class="close">可自动关闭</button><button class="unclose">不会自动关闭</button></div><div class="modal-container"><!-- 模态框将被动态添加到这个容器中 --><!-- <div class="modal"><div class="header">标题名称<i>X</i></div><div class="footer">这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案</div></div> --></div><script>// 1.Modal构造函数封装模态框function Modal(title='',message=''){// console.log(title,message);// 创建modal模态框盒子// 1.1创建div标签this.modalBox=document.createElement('div')// 1.2给div标签添加modal类this.modalBox.className='modal'// 1.3给modal盒子内部填充两个div标签this.modalBox.innerHTML=`<div class="header">${title} <i>X</i></div><div class="footer">${message} </div>`// console.log(this.modalBox);}new Modal('提示','这是一条不会自动关闭的消息')// 2.给构造函数原型对象身上挂载open方法Modal.prototype.open=function(){document.querySelector('.modal-container').append(this.modalBox);setTimeout(() => {this.modalBox.classList.add('open');}, 300);// 点击关闭this.closeBtn=this.modalBox.querySelector('.close-btn');this.modalBox.querySelector('i').addEventListener('click', () => {this.close();});}// close方法Modal.prototype.close=function(){this.modalBox.classList.remove('open');setTimeout(() => {this.modalBox.remove();}, 300); // 等待动画完成后移除元素}// 绑定点击事件document.querySelector('.close').addEventListener('click', function() {const modal = new Modal('标题名称','这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案');modal.open();// 设置模态框在3秒后自动关闭setTimeout(() => {modal.close();}, 3000);});document.querySelector('.unclose').addEventListener('click',function(){const unclose=new Modal('提示','这是一条不会自动关闭的消息')unclose.open()})</script>
</body>
</html>

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

k8s use-context是什么

kubectl 的 use-context 命令用于在 Kubernetes 集群中切换上下文&#xff08;context&#xff09;&#xff0c;从而方便地在多个集群或命名空间之间进行操作。一个上下文定义了 kubectl 使用的 集群、用户 和 命名空间 的组合。 use-context 的作用&#xff1a; 每个上下文&…

AOP学习

corol调用serverce不在是直接调用的是调用底层代理对象&#xff0c;由代理对象统一帮我们处理 AOP常见概念 通知类型 切面顺序

【C++】— 一篇文章让你认识STL

文章目录 &#x1f335;1.什么是STL&#xff1f;&#x1f335;2.STL的版本&#x1f335;3.STL的六大组件&#x1f335;4.STL的重要性&#x1f335;5. 如何学习STL&#x1f335;6. 学习STL的三种境界 &#x1f335;1.什么是STL&#xff1f; STL是Standard Template Library的简称…

算法Day-7

454. 四数相加 II 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0 示例 1&#xff1a; 输入&#xf…

关于游戏行业工作的迷茫

大家好&#xff0c;我是阿赵。   这两年&#xff0c;身边有不少同事在转行。稍微转得近一点的&#xff0c;从游戏技术转成直播的&#xff0c;或者各种后台系统的。转得远的&#xff0c;甚至和技术毫无关系&#xff0c;比如转成销售的&#xff0c;转成炒期货的&#xff0c;开网…

Matlab软件进行金融时间序列数据的描述性统计代码

1、数据S&P500的收盘价格&#xff0c;return100*log(pt/pt-1) 方法1&#xff1a;用python代码 import numpy as np import pandas as pddef calculate_log_returns(prices):"""计算价格序列的对数收益率。参数:prices (numpy.array): 价格序列。返回:log_…

【实战指南】Vue.js 介绍组件数据绑定路由构建高效前端应用

学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把手教你开发炫酷的vbs脚本制作(完善中……&#xff09; 4、牛逼哄哄的 IDEA编程利器技巧(编写中……&#xff09; 5、面经吐血整理的 面试技…

_ZN4os3log9LogStream12WithLocationERKNSt3__112basic_stringIcNS2的函数签名是什么

objdump -tT libTest.so | grep getTime _ZN4os3log9LogStream12WithLocationERKNSt3__112basic_stringIcNS2_11char_traitsIcEENS2_9allocatorIcEEEEi的函数签名是什么 是一个典型的 C 函数签名&#xff0c;其中包含了命名空间、类名、模板参数等信息。这种形式的签名通常出现…

Go 语言初探

Google 公司有一个传统,允许员工利用 20% 的工作时间开发自己的实验项目。2007 年 9月,UTF-8 的设计者之一 Rob Pike(罗布.皮克)在 Google 的分布式编译平台上进行 C++ 编译时,与同事 Robert Griesemer (罗布.格里泽默)在漫长的等待中讨论了编程语言面临的主要问题。他们一…

ChatGPT 现已登陆 Windows 平台

今天&#xff0c;OpenAI 宣布其人工智能聊天机器人平台 ChatGPT 已开始预览专用 Windows 应用程序。OpenAI 表示&#xff0c;该应用目前仅适用于 ChatGPT Plus、Team、Enterprise 和 Edu 用户&#xff0c;是一个早期版本&#xff0c;将在今年晚些时候推出"完整体验"。…

LeetCode 热题100之哈希

1.两数之和 思路分析1&#xff08;暴力法&#xff09; 双重循环枚举满足num[i] nums[j] target的索引&#xff0c;刚开始不知道如何返回一对索引。后来知道可以直接通过return {i,j}返回索引&#xff1b;注意&#xff1a;j应该从i1处开始&#xff0c;避免使用两次相同的元素…

liunx线程

线程的概念 程序中的一个执行路线就是线程&#xff0c;线程就是一个进程内部的控制序列一个进程至少都有一个执行线程线程在进程内部运行&#xff0c;本质是在进程地址空间内运行liunx系统下&#xff0c;cpu眼里的PCB比传统进程更加轻量化透过虚拟地址空间&#xff0c;把进程的…

展会亮点回顾|HMS汽车工业通信解决方案

2024 汽车测试及质量监控博览会&#xff08;中国&#xff09;&#xff08;Testing Expo China – Automotive&#xff09;于 8 月 28 日至 30 日在上海世博展览馆顺利举行。作为汽车测试技术领域的顶级盛会&#xff0c;来自全球的行业领袖和技术专家齐聚一堂&#xff0c;共同探…

即时通讯 离线消息处理初版

离线消息处理 NotOnlineExecute package com.example.im.infra.executor.send;import com.example.im.endpoint.WebSocketEndpoint; import org.apache.commons.collections4.CollectionUtils; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springf…

Oracle里面,with ... as 用法介绍

在Oracle数据库中&#xff0c;WITH AS 子句&#xff08;也称为公用表表达式&#xff0c;CTE, Common Table Expression&#xff09;是一种在查询中定义临时结果集的方法。这个临时结果集可以在后续的查询中被引用&#xff0c;就像是一个临时的表或视图一样。使用 WITH AS 子句可…

Django学习(三)

Django的设计模式及模板层 传统的MVC&#xff08;例如java&#xff09; Django的MTV 模板层&#xff1a; 模板加载&#xff1a; 代码&#xff1a; views.py def test_html(request):#方案一# from django.template import loader# 1. 使用loader加载模板# t loader.get_…

JAVA使用easyExcel导出数据到EXCEl,导出数据不全问题解决

JAVA使用easyExcel导出数据到EXCEl,导出数据不全问题解决 问题描述解决思路一解决思路二温馨提示 问题描述 JAVA使用easyExcel导出数据到EXCEl,导出数据不全问题。 导出的excel部分列有数据&#xff0c;好几列没有数据 解决思路一 从网上百度查询&#xff0c;大多数的解决思路…

ICP算法理解入门之RT求解

本文仅仅分析了一下两组点云做好匹配好了之后&#xff0c; 如何解算RT&#xff0c; 并不涉及匹配过程&#xff0c;详细的匹配&#xff0c;下次再出一篇博客 ICP 求解旋转矩阵 ( R ) 的步骤 给定两个点云集合 ( P {p_1, p_2, …, p_n} )&#xff08;源点云&#xff09;和 ( Q…

线性可分支持向量机的原理推导 9-29对偶可行性条件 公式解析

本文是将文章《线性可分支持向量机的原理推导》中的公式单独拿出来做一个详细的解析&#xff0c;便于初学者更好的理解。 公式 9-29 是支持向量机&#xff08;SVM&#xff09;优化过程中 Karush-Kuhn-Tucker&#xff08;KKT&#xff09; 条件的一个部分&#xff0c;表示对偶可行…

uniapp-uniapp + vue3 + pinia 搭建uniapp模板

使用技术 ⚡️uni-app, Vue3, Vite, pnpm &#x1f4e6; 组件自动化引入 &#x1f34d; 使用 Pinia 的状态管理 &#x1f3a8; tailwindcss - 高性能且极具灵活性的即时原子化 CSS 引擎 &#x1f603; 各种图标集为你所用 &#x1f525; 使用 新的 <script setup> …