原生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 查找新建元素代码
Jul 06 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
juqery 学习之四 筛选查找
Nov 30 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 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开发框架myqee新手快速入门教程
2014/07/14 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
python实现用户登陆邮件通知的方法
2015/07/09 Python
Python set常用操作函数集锦
2017/11/15 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
python实现简单学生信息管理系统
2020/04/09 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
复核员上岗演讲稿
2014/01/05 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
开学典礼观后感
2015/06/15 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
pandas中DataFrame检测重复值的实现
2021/05/26 Python
vscode内网访问服务器的方法
2022/06/28 Servers