原生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 相关文章推荐
JQuery下关于$.Ready()的分析
Dec 13 Javascript
javascript时间函数基础介绍
Mar 28 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
vant中的toast轻提示实现代码
Nov 04 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
php array的学习笔记
2012/05/10 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
JavaScript 题型问答有答案参考
2010/02/17 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
初识Javascript小结
2015/07/16 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
TensorFlow实现Batch Normalization
2018/03/08 Python
django Serializer序列化使用方法详解
2018/10/16 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
python用什么编辑器进行项目开发
2020/06/17 Python
python怎么对数字进行过滤
2020/07/05 Python
python为什么要安装到c盘
2020/07/20 Python
python多线程和多进程关系详解
2020/12/14 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
网吧消防安全制度
2014/01/28 职场文书
党的群众路线学习材料
2014/05/16 职场文书
毕业生工作求职信
2014/06/30 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
小班教师个人总结
2015/02/05 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
学校推普周活动总结
2015/05/07 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
中学生运动会广播稿
2015/08/19 职场文书
2016党校学习心得体会
2016/01/07 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python