原生js实现弹窗消息动画


Posted in Javascript onNovember 20, 2020

本文实例为大家分享了js实现弹窗消息的具体代码,供大家参考,具体内容如下

效果图

原生js实现弹窗消息动画

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>动画消息弹窗</title>
</head>
<style>
 .message {
  -webkit-box-sizing: border-box;
    box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  -webkit-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
  position: fixed;
  top: 8px;
  left: 0;
  z-index: 1010;
  width: 100%;
  pointer-events: none;
 }

 .message-notice {
  padding: 8px;
  text-align: center;

  -webkit-animation-name: MessageMoveOut;
  animation-name: MessageMoveOut;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
 }

 .message-content {
  color: #52c41a;
  display: inline-block;
  padding: 10px 16px;
  background: #fff;
  border-radius: 2px;
  -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  pointer-events: all;
 }

 @-webkit-keyframes MessageMoveOut {
  0% {
   max-height: 0;
   padding: 0;
   opacity: 0;
  }
  100% {
   max-height: 150px;
   padding: 8px;
   opacity: 1;
  }
 }
 @keyframes MessageMoveOut {
  0% {
   max-height: 0;
   padding: 0;
   opacity: 0;
  }
  100% {
   max-height: 150px;
   padding: 8px;
   opacity: 1;
  }
 }
</style>
<body style="text-align: center;">
 <div style="margin: 100px 500px;text-align: right;">
  <a href="#" rel="external nofollow" onclick="handleMessage()">点击弹窗</a>
 </div>

 <div class="message" id="message"></div>

 <script>
  const msg = "我是弹框消息";
  // 弹窗消息
  function handleMessage(message = msg) {
   const parentDiv = document.createElement("div");
   const div = document.createElement("div");
   div.className = "message-content";
   div.innerHTML = message;
   parentDiv.appendChild(div);
   parentDiv.className = "message-notice";
   document.getElementById("message").appendChild(parentDiv);

   setTimeout(() => {
    parentDiv.remove();
   }, 2000);
  }
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery优缺点分析说明
Jun 09 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
JS实现电商放大镜效果
Aug 24 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 #Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 #Vue.js
详解vue 组件注册
Nov 20 #Vue.js
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 #Javascript
JavaScript 异步时序问题
Nov 20 #Javascript
JavaScript实现音乐导航效果
Nov 19 #Javascript
JavaScript实现无限轮播效果
Nov 19 #Javascript
You might like
用mysql内存表来代替php session的类
2009/02/01 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
vue-cli之router基本使用方法详解
2017/10/17 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
python通过yield实现数组全排列的方法
2015/03/18 Python
简单了解什么是神经网络
2017/12/23 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
建筑文秘专业个人求职信范文
2013/12/28 职场文书
财务会计专业求职信
2014/06/09 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
微信搭讪开场白
2015/05/28 职场文书
工程进度款催款函
2015/06/24 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle