原生js实现自定义消息提示框


Posted in Javascript onNovember 19, 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>Document</title>
</head>
<style>
  .popupStyle {
  display: none;
  width: 160px;
  background-color: rgb(85, 85, 85);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: fixed;
  z-index: 1;
  top: 2%;
  left: 50%;
  margin-left: -80px;
 }
 
  .popupStyle::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
 }
</style>
<body style="text-align:center">
 
 <h2 style="margin-top: 100px;">弹窗</h2>
  
 <div style="text-align: center;">
  <a href="#" onclick="handleMsg(msg)">点我有弹窗!</a>
  <a href="#" onclick="handleDomMsg(domMsg)">点我有弹窗!</a>
 </div>

 <span class="popupStyle" id="popupMsg">提示信息!</span>
 

 <script>
  const msg = "我是样式弹窗";
  const domMsg = "我是DOM弹窗";

  // 样式弹窗
  function handleMsg(message) {
   const popup = document.getElementById("popupMsg");
   popup.innerHTML = message || "Hello, World";
   popup.style.display="block";
   setTimeout(() => {
    popup.style.display="none"
   }, 1000);
  }

  // DOM 弹窗
  function handleDomMsg(message) {
   const div = document.createElement("div");
   document.body.appendChild(div);
   div.innerHTML = message || "this is a Message";
   div.className = "popupStyle";
   div.style.display = "block";

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

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

Javascript 相关文章推荐
JavaScript 计算当天是本年本月的第几周
Mar 22 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
jQuery中库的引用方法
Jan 06 jQuery
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 #Javascript
jQuery-App输入框实现实时搜索
Nov 19 #jQuery
elementUI同一页面展示多个Dialog的实现
Nov 19 #Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 #Javascript
深入了解Vue3模板编译原理
Nov 19 #Vue.js
微信小程序实现倒计时功能
Nov 19 #Javascript
微信小程序实现列表左右滑动
Nov 19 #Javascript
You might like
基于empty函数的判断详解
2013/06/17 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP微信红包API接口
2015/12/05 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
python super的使用方法及实例详解
2019/09/25 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
python实现局域网内实时通信代码
2019/12/22 Python
实例代码讲解Python 线程池
2020/08/24 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
工作建议书范文
2014/05/13 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
公司转让协议书
2016/03/19 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang