原生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 相关文章推荐
json中换行符的处理方法示例介绍
Jun 10 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
JS出现失效的情况总结
Jan 20 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
Element InputNumber计数器的使用方法
Jul 27 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
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
php实现的在线人员函数库
2008/04/09 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
PHP递归的三种常用方式
2019/02/28 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
校园报刊亭的创业计划书
2014/01/02 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
市场营销管理制度
2014/01/29 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
楚门的世界观后感
2015/06/03 职场文书
学校运动会通讯稿
2015/07/18 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
JavaScript原型链详解
2021/11/07 Javascript