原生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取得WEB安全颜色列表的方法
Jul 14 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
对vue生命周期的深入理解
2020/12/03 Vue.js
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
在Django中使用Sitemap的方法讲解
2015/07/22 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
详解Python自建logging模块
2018/01/29 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
详解python破解zip文件密码的方法
2020/01/13 Python
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
副董事长岗位职责
2014/04/02 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
考博导师推荐信范文
2015/03/27 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技