原生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的单例模式 (singleton in Javascript)
Jun 11 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
原生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
php自定义apk安装包实例
2014/10/20 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
js的写法基础分析
2011/01/17 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
js登录弹出层特效
2014/03/07 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
《愚公移山》教学反思
2014/02/20 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
观看建国大业观后感
2015/06/01 职场文书
小学运动会通讯稿
2015/07/18 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android