html提示弹窗（纯js，无需引入其他库）

网页开发很多时候都需要一些提示框，来显示某个动作的执行状态。
自带的window.alert还需要点确定按钮，很多时候我们只需要停留几秒的小弹窗，不需要用户点击或输入。
用js写一个函数，实现该功能。

//type:success, error, info
//time:ms
function displayAlert(type, data, time){var lunbo=document.createElement("div");if(type == "success") {lunbo.style.backgroundColor = "#009900";} else if(type == "error") {lunbo.style.backgroundColor = "#990000";} else if(type == "info") {lunbo.style.backgroundColor = "#e6b800";} else {console.log("入参type错误");return;}lunbo.id="lunbo";lunbo.style.position = "absolute";lunbo.style.width = "200px";lunbo.style.height = "60px";lunbo.style.marginLeft = "-100px";lunbo.style.marginTop = "-30px";lunbo.style.left = "90%";lunbo.style.top = "15%";lunbo.style.color = "white";lunbo.style.fontSize = "25px";lunbo.style.borderRadius = "20px";lunbo.style.textAlign="center";lunbo.style.lineHeight="60px";if(document.getElementById("lunbo")==null){document.body.appendChild(lunbo);lunbo.innerHTML=data;setTimeout(function(){document.body.removeChild(lunbo);} ,time);}
}

以下代码是参考其他大佬的，然后做了一些修改。
调用时的入参包含三部分：
1、type
success ：显示绿色弹窗
error: 显示红色弹窗
info:显示黄色弹窗
这几个颜色是我自己用取色器找的觉得比较好看的颜色，

    if(type == "success") {lunbo.style.backgroundColor = "#009900";} else if(type == "error") {lunbo.style.backgroundColor = "#990000";} else if(type == "info") {lunbo.style.backgroundColor = "#e6b800";} else {console.log("入参type错误");return;}

你也可以按照自己的喜好在此处去修改颜色的rgb值

2、弹窗内容
内容就根据需要传入就行。
弹窗的格式如下：

 lunbo.style.position = "absolute";lunbo.style.width = "200px";lunbo.style.height = "60px";lunbo.style.marginLeft = "-100px";lunbo.style.marginTop = "-30px";lunbo.style.left = "90%";lunbo.style.top = "15%";lunbo.style.color = "white";lunbo.style.fontSize = "25px";lunbo.style.borderRadius = "20px";lunbo.style.textAlign="center";lunbo.style.lineHeight="60px";

你也可以根据需要自己更改弹窗出现的位置，弹窗的边缘角度，以及文字的大小和颜色。

3、弹窗持续时间
单位为毫秒，传入整数即可。

简单再写一个html测试程序：

<html>
<script type="text/javascript">function displayAlert(type, data, time){var lunbo=document.createElement("div");if(type == "success") {lunbo.style.backgroundColor = "#009900";} else if(type == "error") {lunbo.style.backgroundColor = "#990000";} else if(type == "info") {lunbo.style.backgroundColor = " #e6b800";} else {console.log("入参type错误");return;}lunbo.id="lunbo";lunbo.style.position = "absolute";lunbo.style.width = "200px";lunbo.style.height = "60px";lunbo.style.marginLeft = "-100px";lunbo.style.marginTop = "-30px";lunbo.style.left = "90%";lunbo.style.top = "15%";lunbo.style.color = "white";lunbo.style.fontSize = "25px";lunbo.style.borderRadius = "20px";lunbo.style.textAlign="center";lunbo.style.lineHeight="60px";if(document.getElementById("lunbo")==null){document.body.appendChild(lunbo);lunbo.innerHTML=data;setTimeout(function(){document.body.removeChild(lunbo);} ,time);}}function test0() {displayAlert("success", "success TEST", 1500);}function test1() {displayAlert("error", "error TEST", 1500);}function test2() {displayAlert("info", "info TEST", 1500);}
</script>
<body><button onclick="test0();">成功弹窗</button><button onclick="test1();">失败弹窗</button><button onclick="test2();">消息弹窗</button>
</body>
</html>

该程序可直接在https://www.w3school.com.cn/tiy/t.asp?f=eg_html_td_colspan这个网址复制粘贴然后运行。

实现效果为

如果工程较大可以直接将该函数单独写在js文件中，在html中引用即可。在其他js中引用有时会提示找不到文件，可以将两个js文件都放在html的body之后，例如：
我在这个html中引用了infoCfg.js,，而这个js文件需要调用弹窗显示，就在html的该位置处引用这两个js即可。

OK，完毕。

html提示弹窗（纯js，无需引入其他库）相关推荐

vue项目js文件引入第三方库组件
vue项目js文件引入第三方库组件 //首先按需引入第三方库 import { MessageBox } from 'element-ui' 使用: MessageBox.alert(`<di ...
php 右下脚弹窗,纯js的右下角弹窗实例代码
下面小编就为大家带来一篇纯js的右下角弹窗实例代码.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧这个弹窗是如下图的效果: 打开网页的时候,这个弹窗会淡入,之后点击右上 ...
html js 循环提示框,纯js超酷消息提示框插件notice.js
notice.js是一款纯js超酷消息提示框插件.notice.js为纯js编写,没有任何依赖文件.通过它可以在页面上制作出漂亮的toast消息通知框效果.该js消息提示框插件的特点还有: 支持4中情 ...
纯js导出Excel文件（无需引入插件）
纯js导出Excel文件(无需引入插件) 提示:代码没有来得及整理,大致代码都在这里 let thlist = [[{text: '序号', rowspan: '2'},{text: '姓名', ro ...
纯js消息弹窗组件Message
js消息弹窗组件文章目录 js消息弹窗组件 1. js部分代码 2.使用方法 3.演示效果写组件上瘾,今天写一个纯js消息弹窗组件,复制即可使用,css也写在了js之中,用js生成,代码若是存在不 ...
【jQuery】纯js的右下角弹窗
这个弹窗是如下图的效果: 打开网页的时候,这个弹窗会淡入,之后点击右上角的关闭按钮,其实就是一个& times;会淡出. 采用淡入淡出是因为直接Jquery一个fadeIn与fadeOut省事 ...
纯js弹窗Dialog组件
纯js弹窗Dialog组件文章目录纯js弹窗Dialog组件 1. js部分 2. css样式 3. 简单使用 4. 效果展示 1. js部分 /* eslint-disable */ const ...
react引入外部js_React.js：无需使用外部库即可实现拖放功能
react引入外部js by Rajesh Pillai 由Rajesh Pillai React.js:无需使用外部库即可实现拖放功能 (React.js: implement the drag a ...
纯js封装一个多功能弹出框
不借助其它的css代码和图片资源,可直接调用. 原创内容,请勿转载. 注意,不要直接复制文章里的封装代码,因为编辑器的原因,无论怎么编辑,它还是给修改了代码.文末提供了封装代码的下载地址(无需积分) ...

html提示弹窗（纯js，无需引入其他库）

html提示弹窗（纯js，无需引入其他库）相关推荐

最新文章

热门文章