原生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弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
Javascript闭包实例详解
Nov 29 Javascript
Node.js实现数据推送
Apr 14 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
Vue 递归多级菜单的实例代码
May 05 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地址引用(php地址引用的效率问题)
2012/03/23 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
vue监听键盘事件的相关总结
2021/01/29 Vue.js
从零学Python之入门(三)序列
2014/05/25 Python
Python列表(list)常用操作方法小结
2015/02/02 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
企业总经理职责
2014/02/02 职场文书
给全校老师的建议书
2014/03/13 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
总经理岗位职责
2015/02/04 职场文书
房产电话营销开场白
2015/05/29 职场文书
实习报告怎么写
2019/06/20 职场文书
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技