首页 / JAVASCRIPT / 如何用原生js写一个弹窗消息提醒插件

如何用原生js写一个弹窗消息提醒插件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了如何用原生js写一个弹窗消息提醒插件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含12297字，纯文字阅读大概需要18分钟。

内容图文

1.分析

当消息被触发的时候，会有一个自上而下的淡入过程。
在持续了一段时间后会自动的消失，或者是需要用户来手动的点击关闭按钮。
在消息消失的时候，会有一个自下而上的淡出过程。
消息是可以叠加弹出的，最新的消息会排在消息列表的最后面。
当前面的消息消失后，后面的消息会有一个向上滑动效果。
然后消息本身是有三部分组成

消息图标，用来区分不同类型的消息。
消息文本。
关闭按钮，并不是所有消息都需要关闭按钮。

2. 实现样式

那么，不管我们是用原生js还是vue，首先呢，我们都需要把这个消息的基本样式给写出来，然后再通过js来控制消息的弹出和关闭。
所以，我们先来写html和css。

<!-- message.html -->
 <!-- 这个css是我引用阿里的一些字体图标，请戳： https://www.iconfont.cn/ -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1117508_wxidm5ry7od.css">
<link rel="stylesheet" href="./message.css" rel="external nofollow" >
<script src="./message.js"></script>
 <!-- 消息外层容器，因为消息提醒基本上是全局的，所以这里用id，所有的弹出消息都是需要插入到这个容器里边的 -->
<div id="message-container">
 <div class="message">
 <!-- 消息图标 icon icon-success对应我的阿里字体图标的font-class -->
 <div class="type icon icon-success"></div>
 <!-- 消息文本 -->
 <div class="text">这是一条正经的消息~</div>
 <!-- 关闭按钮 -->
 <div class="close icon icon-close"></div>
 </div>
 <div class="message">
 <div class="type icon icon-error"></div>
 <div class="text">这是一条正经的消息~</div>
 </div>
</div>
/* message.css */
 #message-container {
 position: fixed;
 left: 0;
 top: 0;
 right: 0;
 /* 采用flex弹性布局，让容器内部的所有消息可以水平居中，还能任意的调整宽度 */
 display: flex;
 flex-direction: column;
 align-items: center;
}
#message-container .message {
 background: #fff;
 margin: 10px 0;
 padding: 0 10px;
 height: 40px;
 box-shadow: 0 0 10px 0 #eee;
 font-size: 14px;
 border-radius: 3px;
 /* 让消息内部的三个元素（图标、文本、关闭按钮）可以垂直水平居中 */
 display: flex;
 align-items: center;
}
#message-container .message .text {
 color: #333;
 padding: 0 20px 0 5px;
}
#message-container .message .close {
 cursor: pointer;
 color: #999;
}
 /* 给每个图标都加上不同的颜色，用来区分不同类型的消息 */
#message-container .message .icon-info {
 color: #0482f8;
}
#message-container .message .icon-error {
 color: #f83504;
}
#message-container .message .icon-success {
 color: #06a35a;
}
#message-container .message .icon-warning {
 color: #ceca07;
}
#message-container .message .icon-loading {
 color: #0482f8;
}

3. 实现动画

接下来要做的就是这个消息的弹出和消失动画，我们还是用css来实现。

想要在css里边实现自定义的动画，首先需要用@keyframes来定义一个动画规则，然后再通过animation属性把动画应用到某个元素上就可以了。
所谓的动画规则其实就是一个动画序列，或者可以理解为一个个的关键帧，而关键帧的内部就是你想改变的css属性，你可以在关键帧里边写上几乎任何的css属性，当动画被应用的时候，这些css属性就会根据各个关键帧做出相应的变换。

那我们先用@keyframes来写一个动画规则吧

/* message.css */
 /* 这个动画规则我们就叫做message-move-in吧，随后我们会用animation属性在某个元素上应用这个动画规则。 */
@keyframes message-move-in {
 0% {
 /* 前边分析过了，弹出动画是一个自上而下的淡入过程 */
 /* 所以在动画初始状态要把元素的不透明度设置为0，在动画结束的时候再把不透明度设置1，这样就会实现一个淡入动画 */
 opacity: 0;
 /* 那么“自上而下”这个动画可以用“transform”变换属性结合他的“translateY”上下平移函数来完成 */
 /* translateY(-100%)表示动画初始状态，元素在实际位置上面“自身一个高度”的位置。 */
 transform: translateY(-100%);
 }
 100% {
 opacity: 1;
 /* 平移到自身位置 */
 transform: translateY(0);
 }
}

然后我们再定义一个和message元素同级的类move-in，把message-move-in这个动画规则给应用到move-in类上，这样我们需要让哪个消息弹出，就只需要在消息的类上加一个move-in就行。

/* message.css */
 #message-container .message.move-in {
 /* animation属性是用来加载某个动画规则 请参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation */
 animation: message-move-in 0.3s ease-in-out;
}

可以看到，只需要在某个message上追加一个move-in就能实现弹出动画。
那么，消失动画也是一个套路，只不过跟弹出动画反过来而已。

/* message.css */
 @keyframes message-move-out {
 0% {
 opacity: 1;
 transform: translateY(0);
 }
 100% {
 opacity: 0;
 transform: translateY(-100%);
 }
}
 #message-container .message.move-out {
 animation: message-move-out 0.3s ease-in-out;
 /* 让动画结束后保持结束状态 */
 animation-fill-mode: forwards;
}

animation-fill-mode: forwards;这个是干嘛的呢？因为动画结束后默认会回到元素的最初状态，在这里表现的是消失后又出现了。

所以animation-fill-mode: forwards;是为了让动画结束后保持这个结束状态，也就是不在显示了。

4. 编写js插件

那么，在写js之前呢，我们先来思考一下，如果你是插件的使用者，你想怎么来调用这个插件？
我们的插件很简单，就是在需要的时候弹出一个消息，假设插件他提供给我们的是一个类，就叫做Message吧，并且他内部有一个show方法，那么只要使用者实例化这个类后，调用他的show方法，然后传入不同的参数就可以弹出一个消息了。而且我们所实例化的对象可以是全局唯一的。

<!-- message.html -->
<!-- 省略... -->
 <script>
// message可以定义为全局对象，项目中可以直接调用。
const message = new Message();
message.show({
 type: 'success',
 text: '点个关注不迷路~'
});
</script>

所以呢，我们要先写一个Message类，并且必须要实现一个show方法。

/* message.js */
 class Message {
 constructor() {
 }
 show({ type = 'info', text = '' }) {
 }
}

这里我直接用了es6的class关键词，其实他的内部还是原型链的形式。用class呢，可以让我们更直观的了解这个类。

根据我们在第一部分的分析，所有的消息元素都是需要在js中创建的，所以我们不需要使用者来写任何html代码，那么我们只需要在对象被实例化new Message()的时候，就去创建消息容器message-container，后续在调用show方法时候，直接把消息插入到message-container内部即可。

/* message.js */
 class Message {
 /**
 * 构造函数会在实例化的时候自动执行
 */
 constructor() {
 const containerId = 'message-container';
 // 检测下html中是否已经有这个message-container元素
 this.containerEl = document.getElementById(containerId);
 if (!this.containerEl) {
 // 创建一个Element对象，也就是创建一个id为message-container的dom节点
 this.containerEl = document.createElement('div');
 this.containerEl.id = containerId;
 // 把message-container元素放在html的body末尾
 document.body.appendChild(this.containerEl);
 }
 }
 show({ type = 'info', text = '' }) {
 }
}

这样，我们调用const message = new Message()的时候会在dom中自动的插入一个message-container节点。
那么，最重要的还是我们的show方法：

创建一个消息节点，并把它追加到message-container容器的末尾。
设定一个时间，在这个时间结束后自动的将消息移除。
监听“关闭按钮”的click事件，来让用户可以手动的移除消息。
我们一步一步来。

4.1 创建一个消息节点，并把它追加到message-container容器的末尾。

class Message {
 // 省略...
 show({ type = 'info', text = '' }) {
 // 创建一个Element对象
 let messageEl = document.createElement('div');
 // 设置消息class，这里加上move-in可以直接看到弹出效果
 messageEl.className = 'message move-in';
 // 消息内部html字符串
 messageEl.innerHTML = `
 <span class="icon icon-${type}"></span>
 <div class="text">${text}</div>
 <div class="close icon icon-close"></div>
 `;
 // 追加到message-container末尾
 // this.containerEl属性是我们在构造函数中创建的message-container容器
 this.containerEl.appendChild(messageEl);
 }

我们来调用下试试~

<!-- message.html -->
<!-- 省略... -->
 <button class="btn">弹窗消息提醒</button>
 <script>
 // message可以定义为全局对象，项目中可以直接调用。
 const message = new Message();
 document.querySelector('.btn').addEventListener('click', () => {
 message.show({
 type: 'success',
 text: '点个关注不迷路~'
 });
 });
 </script>

4.2 设定一个时间，在这个时间结束后自动的将消息移除。

// message.js
 class Message {
 // 省略...
 show({ type = 'info', text = '', duration = 2000 }) {
 // 省略...
 // 用setTimeout来做一个定时器
 setTimeout(() => {
 // Element对象内部有一个remove方法，调用之后可以将该元素从dom树种移除！
 messageEl.remove();
 }, duration);
 }
}

可以看到，消息在过了2秒后，自动的从dom树中移除了，不过呢并没有动画，还记得前边我们写了move-out类吗？这个类和message是同级的。现在我们只需要在定时结束后把这个类应用到message元素上就行。

// message.js
 class Message {
 // 省略...
 show({ type = 'info', text = '', duration = 2000 }) {
 // 省略...
 // 用setTimeout来做一个定时器
 setTimeout(() => { // 首先把move-in这个弹出动画类给移除掉，要不然会有问题，可以自己测试下
 messageEl.className = messageEl.className.replace('move-in', ''); // 增加一个move-out类
 messageEl.className += 'move-out';
 // 这个地方是监听动画结束事件，在动画结束后把消息从dom树中移除。
 // 如果你是在增加move-out后直接调用messageEl.remove，那么你不会看到任何动画效果
 messageEl.addEventListener('animationend', () => {
 // Element对象内部有一个remove方法，调用之后可以将该元素从dom树种移除！
 messageEl.remove();
 });
 }, duration);
 }
}

4.3 监听“关闭按钮”的click事件，来让用户可以手动的移除消息。

有时候呢，我们希望消息能够一直展示，直到用户来手动的关闭掉，那么首先我们要加一个参数，用来控制是否展示这个关闭按钮。

// message.js
 class Message {
 // 省略...
 show({ type = 'info', text = '', duration = 2000, closeable = false }) {
 // 创建一个Element对象
 let messageEl = document.createElement('div');
 // 设置消息class，这里加上move-in可以直接看到弹出效果
 messageEl.className = 'message move-in';
 // 消息内部html字符串
 messageEl.innerHTML = `
 <span class="icon icon-${type}"></span>
 <div class="text">${text}</div>
 `;
 // 是否展示关闭按钮
 if (closeable) {
 // 创建一个关闭按钮
 let closeEl = document.createElement('div');
 closeEl.className = 'close icon icon-close';
 // 把关闭按钮追加到message元素末尾
 messageEl.appendChild(closeEl);
 // 监听关闭按钮的click事件，触发后将调用我们的close方法
 // 我们把刚才写的移除消息封装为一个close方法
 closeEl.addEventListener('click', () => {
 this.close(messageEl)
 });
 }
 // 追加到message-container末尾
 // this.containerEl属性是我们在构造函数中创建的message-container容器
 this.containerEl.appendChild(messageEl);
 // 只有当duration大于0的时候才设置定时器，这样我们的消息就会一直显示
 if (duration > 0) {
 // 用setTimeout来做一个定时器
 setTimeout(() => {
 this.close(messageEl);
 }, duration);
 } 
 }
 /**
 * 关闭某个消息
 * 由于定时器里边要移除消息，然后用户手动关闭事件也要移除消息，所以我们直接把移除消息提取出来封装成一个方法
 * @param {Element} messageEl 
 */
 close(messageEl) {
 // 首先把move-in这个弹出动画类给移除掉，要不然会有问题，可以自己测试下
 messageEl.className = messageEl.className.replace('move-in', '');
 // 增加一个move-out类
 messageEl.className += 'move-out';
 // 这个地方是监听动画结束事件，在动画结束后把消息从dom树中移除。
 // 如果你是在增加move-out后直接调用messageEl.remove，那么你不会看到任何动画效果
 messageEl.addEventListener('animationend', () => {
 // Element对象内部有一个remove方法，调用之后可以将该元素从dom树种移除！
 messageEl.remove();
 });
 }
}

我们来调用下试试~

<!-- message.html -->
<!-- 省略... -->
 <button class="btn">弹窗消息提醒</button>
 <script>
 // message可以定义为全局对象，项目中可以直接调用。
 const message = new Message();
 document.querySelector('.btn').addEventListener('click', () => {
 message.show({
 type: 'warning',
 text: '点我旁边的叉叉试试',
 duration: 0, // 不会自动消失
 closeable: true, // 可手动关闭
 });
 });
 </script>

其实已经写的差不多了，不过还是有一些小问题，比如当我们弹出两个甚至更多消息的时候，如果前边的消息消失后，下面的消息会直接跳到上面的位置，很僵硬，没有任何的滑动。

我们可以通过css的transition属性来让meesage的高度逐渐变小，这样下面的元素就会根据变化来逐渐上移。

/* message.css */
/* 省略... */
 #message-container .message {
 background: #fff;
 margin: 10px 0;
 padding: 0 10px;
 height: 40px;
 box-shadow: 0 0 10px 0 #ccc;
 font-size: 14px;
 border-radius: 3px;
 /* 让消息内部的三个元素（图标、文本、关闭按钮）可以垂直水平居中 */
 display: flex;
 align-items: center;
/* 增加一个过渡属性，当message元素的高度和margin变化时候将会有一个过渡动画 */
 transition: height 0.2s ease-in-out, margin 0.2s ease-in-out;
} 
/* 省略... */

然后我们只需要在Message类的close方法中做一下改变：

 close(messageEl) {
 // 首先把move-in这个弹出动画类给移除掉，要不然会有问题，可以自己测试下
 messageEl.className = messageEl.className.replace('move-in', '');
 // 增加一个move-out类
 messageEl.className += 'move-out';
 // move-out动画结束后把元素的高度和边距都设置为0
 // 由于我们在css中设置了transition属性，所以会有一个过渡动画
 messageEl.addEventListener('animationend', () => {
 messageEl.setAttribute('style', 'height: 0; margin: 0');
 });
 // 这个地方是监听transition的过渡动画结束事件，在动画结束后把消息从dom树中移除。
 messageEl.addEventListener('transitionend', () => {
 // Element对象内部有一个remove方法，调用之后可以将该元素从dom树种移除！
 messageEl.remove();
 });
 }

结尾
好了，基本上已经写好了，不过为了各个浏览器的兼容性，建议大家用babel转码，如果想发布，可以用webpack把js和css一块打包。
不过我们还是少考虑了一个场景，现在的关闭消息都是对象内部调用close方法来实现，如果我们希望外部能够控制消息的关闭呢，比如我请求服务器时候弹出一个loading的消息，现在服务器返回数据后，我怎么来关闭这个消息呢。
很简单，各位自行实现吧！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的如何用原生js写一个弹窗消息提醒插件全部内容，希望文章能够帮你解决如何用原生js写一个弹窗消息提醒插件所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/331484.html

来源：【匿名】

【上一篇】了解javascript中let和var及const关键字的区别【下一篇】javascript 怎么调用php方法

更多 ►

【如何用原生js写一个弹窗消息提醒插件】教程文章相关的互联网学习教程文章

原生JS的地区二级联动，很好理解的逻辑【代码】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="area.js"></script></head><body><select name="province" id="province" onchange="getCity()"><option value="">省份</option></select><select name="city" id="city"><option value="">城市</...

网站前端_Jquery-基础入门.0001.原生Js到后期封装库Jquery的过渡?【代码】

原生缺点:1. JS的出现使得网页与用户之间实现了一种实时/动态/交互的关系,网页可以包含更多活跃的元素和精彩的内容2. JS的弊端在于复杂的DOM对象,而JQuery封装了很多预定义的对象和使用函数简化了DOM操作,使得我们可以快速创建有高难度交互的富客户端页面,且兼容各大浏览器简单介绍:1. JQuery是一个优秀的JavaScript库,拥有强大的选择器,出色的DOM操作,可靠的事件处理,完善的兼容性和链式操作等功能,目前团队主要推核心库(JQuery)/...

无限循环轮播图之运动框架（原生JS）【代码】

封装运动框架 1function getStyle(obj,name){2if(obj.currentStyle){3return obj.currentStyle[name];4 }else{5return getComputedStyle(obj,false)[name];6 }7}8function move(obj,json,options){9var options=options || {}; 10var duration=options.duration || 800; 11var easing=options.easing || ‘linear‘; 12var n=0; 13var start={}; 14var dis={}; 15var count=Math.ceil(duration/30); 16//{top:0,left:0}17fo...

原生js给同一对象绑定多个事件

事件监听var son = document.querySelector(".son");son.addEventListener(‘click‘, once1);function once1() {alert(1)}son.addEventListener(‘click‘, once2);function once2() {alert(2)}原文：https://www.cnblogs.com/EternalZH/p/10395051.html

几个原生js知识【代码】

1、document.documentElement返回根节点 html。2、原生方法获取一个对象的某个样式的值。function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } alert(getStyle(document.documentElement,‘fontSize‘)) ; 原文：http://www.cnblogs.com/gaidalou/p/7685007.html

原生js拖拽效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title><style> *{ margin:0; padding:0; } #box{ width:100px; height:100px; background: red; position: absolute; left:0; top:0; cursor: move; }</style><body> <div id="box"></div></body></html><script> var oBox=document.getElementById(‘box‘); oBox.onmousedown=function(e){ ...

用jQuery基于原生js封装的轮播【代码】

我发现轮播在很多网站里面都用到过，一个绚丽的轮播可以为网页增色不少，最近闲来无事，也用原生js封装了一个轮播，可能不像网上的插件那么炫，但是也有用心去做。主要用了闭包的思想。需要传递的参数有：图片地址的数组，图片宽度，上一页，下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间。功能：实现了轮播的自动轮播，可以点击上一页，下一页进行切换。下面是html中的代码,只需要把存放的容器写好...

原生js实现点击复制功能【代码】【图】

代码： <input type="text"> <button>复制</button> <script> var input = document.getElementsByTagName(‘input‘)[0] var button = document.getElementsByTagName(‘button‘)[0] button.onclick = function(){input.value = "hello world"input.select()document.execCommand("copy") } </script>效果：execCommand常用方法： cut delete copy原文：http://blog.51cto.com/12173069/2106070

原生js仿jquery一些常用方法【代码】

原生js仿jquery一些常用方法下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧最近迷上了原生js，能不用jquery等框架的情况都会手写一些js方法，记得刚接触前端的时候为了选择器而使用jquery。。。现在利用扩展原型的方法实现一些jquery函数：1.显示/隐藏//hide() Object.prototype.hide = function(){ this.style.display="none"; r...

原生js面试题

1、线程与进程的区别一个程序至少有一个进程，一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。从逻辑角度来看...

原生JS实现圆周运动

<body> <div id="ball" style="width:20px; height:20px; background:red; border-radius:50%; position:absolute; left:0; top:80px;"></div> <script> var ball = document.getElementById("ball"); var radian = 0.1; var x = 0; var y = 0; document.onmousemove = function(e){ e = e || event; x = e.clientX; y = e.clientY; } var timer1 = setInterval(function(){ ball.style.left = x + Math.cos(radian...

原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法【代码】

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>addclass,removeclass,hasclass,toggleclass,getbyclass</title> </head> <body> <div class="div1" id="box1"></div> <input type="button" value="按钮" id="btn1"/> <script>function addClass(obj,cls) {//obj:要添加classname的元素，cls:要添加的classname;//如果原来没有class：if(obj.className == ‘‘){obj.className = cls;} else {//本来已经有c...

原生js实现返回顶部特效【代码】

index.html<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><link herf="index.css"></head><body><span id="icon"></span><p>我是程序员，平凡有一点理想，渴望让世界不一样！</p><p>我是程序员，平凡有一点理想，渴望让世界不一样！</p><p>我是程序员，平凡有一点理想，渴望让世界不一样！</p><p>我是程序员，平凡有一点理想，渴望让世界不一样！</p><p>我是程序员，平凡有一点理想，渴望让世界不一样...

普通选项卡+自动播放功能+向前/向后按钮原生js

今天做了幻灯片，主要功能包括：普通选项卡，向前/向后播放按钮，向前？向后播放功能,自动播放功能要实现简单选项卡功能是没有问题的，但是添加功能就出现各种各样的问题了遇到的问题：1 下标问题 2普通选项卡与向前/向后功能结合的时候冲突，可以向前/向后播放，但是再想实现普通选项卡就出问题了3 添加向前/向后按钮后，html布局下移4 添加向前/向后按钮的时候，我用img标签，显然这个不适用，不能很好的调节垂直居中5 当鼠标放在...

原生js实现放大镜效果【代码】【图】

放大镜效果主要涉及3个鼠标事件：1.onmouseover，鼠标移入浮动小方块和显示放大的区域显示；2.onmousemove，鼠标移动，小方块和放大区域一起移动；3.onmouseout，鼠标移除小方块和放大区域消失。其实放大镜效果最主要的是小方块与放大区域的比例及位置： <div id="small_box"><div class="small_Pic"><div id="float_box"></div><img src="1.png" /></div></div><div id="big_box"><div class="big_Pic"><img src="1.png" /></di...

首页 / JAVASCRIPT / 如何用原生js写一个弹窗消息提醒插件

如何用原生js写一个弹窗消息提醒插件

内容导读

内容图文

内容总结

内容备注

内容手机端

【如何用原生js写一个弹窗消息提醒插件】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程