原生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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
jQuery 相关控件的事件操作分解
Aug 03 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
浅谈Redux中间件的实践
Jul 27 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
原生js实现分页效果
Sep 23 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
PHP加密解密函数详解
2015/10/28 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
详解如何设置Python环境变量?
2019/05/13 Python
PageFactory设计模式基于python实现
2020/04/14 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
大韩航空官方网站:Korean Air
2017/10/25 全球购物
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
校园餐饮创业计划书
2014/01/10 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
小学优秀学生评语
2014/12/29 职场文书
乱世佳人观后感
2015/06/08 职场文书
鉴史问廉观后感
2015/06/10 职场文书
Python学习之迭代器详解
2022/04/01 Python