原生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 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
JTrackBar水平拖动效果
Jul 15 Javascript
jQuery 使用手册(七)
Sep 23 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
我的论坛源代码(六)
2006/10/09 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
javascript+mapbar实现地图定位
2010/04/09 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
python三元运算符实现方法
2013/12/17 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
django的ORM操作 增加和查询
2019/07/26 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
pandas分组聚合详解
2020/04/10 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
python 获取字典键值对的实现
2020/11/12 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
小学生期末自我鉴定
2014/01/19 职场文书
团委竞选演讲稿
2014/04/24 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
2015年个人思想总结
2015/03/09 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
Python中常见的导入方式总结
2021/05/06 Python