JavaScript 原生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 原生js实现自定义消息提示框相关推荐

html 原生 tooltip,原生js实现tooltip提示框的效果
在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我,只是随机一瞟,便看到了这个tooltip的 ...
php 删除确认,js确认删除方法 js删除确认提示框
摘要腾兴网为您分享:js确认删除方法 js删除确认提示框,篆刻字典,智慧农业,星球联盟,小番茄等软件知识,以及金山网盾3.6,手机tgp,省钱王,qq隐身,战锤全面战争,qq群签到,格力空调新派工系 ...
qml 自定义消息框_Qt qml 自定义消息提示框
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/a844651990/article/d ...
php中如何写js代码提示_PHP 如何编写类似js中alert() 提示框
这篇文章主要介绍了PHP 实现类似js中alert() 提示框功能,非常的实用,这里推荐给大家,有需要的小伙伴来参考下,希望大家能喜欢. 主要应用于添加判断提示,跳转,返回,刷新. 代码如下:/** ...
php 右下脚弹窗,JavaScript实现右下角弹出提示框的方法
在我们日常开发工作中,我们会经常遇到需要在页面的右下角弹出提示框或者广告的小功能,这样是为了更好的让用户体验,那么如何实现网页右下角弹出提示框呢?今天我们就带大家介绍下JavaScript实现右下角弹 ...
bootstrap js插件篇——提示框、弹出框、警告框
六.提示框.弹出框.警告框 6.1提示框 6.1.1基本结构注: 1.提示框的触发方式和前面介绍的插件略有不同,不能直接通过自定义的属性 data- 来触发,必须得依赖于JavaScript的代码触 ...
Django使用JavaScript弹出确认删除提示框
问题描述:删除数据时,为了避免误删,要在删除之前弹出提示框,用户点击确认删除之后才将相应数据删除. 工具与环境:JavaScript web开发 Django框架 python 1.JavaScrip ...
layer.js中删除提示框
eayui datagrid 中的操作列初始化 {field : 'cz', title : '操作', align : 'center', width : '20%', formatter : fu ...
Unity制作自定义消息提示框
工作中使用软件经常会出现各种提示框?确定XXXXXX吗?选项一般是三个,是,否,取消.今天心血来潮,于是也尝试自己用unity制作一个简单的消息提示框. 准备工作: 首先需要搭建一个最简单的消息框界面 ...
js 自定义title提示框(附加文本框内容验证) (II)
在上一篇的基础上添加了一个小功能,验证文本框是否为空和数字效果图页面代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit ...

JavaScript 原生js实现自定义消息提示框

效果图

上代码

JavaScript 原生js实现自定义消息提示框相关推荐

最新文章

热门文章