原生js自定义提示框

原生js自定义提示框

本作者将文件命名为: showTips.js
在页面中引入 showTips.js

效果图如下：

描述一下：

原生的alert()弹框不太美观，又不想因为一个 提示框 引入其他的框架，
所以自己用原生js实现一个简单的 提示框 。

使用：

基本使用：

showTips();

有参数使用：

var obj = {
	title:"提示框",	//标题 可选 也是默认值
	infoTips:"hi",	//提示消息 可选 也是默认值
	duration:800,	//消失时间 可选 也是默认值
	width:180,		//宽度 可选 也是默认值
	height:100,		//高度 可选 也是默认值
};
showTips(obj);

可多次调用，比如点击某个按钮调用 showTips();
又比如：表单方面的检测 提示 等,showTips({infoTips:‘请输入点内容，老铁！’});

js源码如下：

/* 
	时间:2021-6-15 
*/
// js自定义 提示框
function showTips(objInfo){
	var mTitle = objInfo && objInfo.title || "提示框";
	var w = objInfo && objInfo.width || 180;

	var h = objInfo && objInfo.height || 100;
	var duration = objInfo && objInfo.duration || 800;

	var infoTips = objInfo && objInfo.infoTips || "hi";

	var alert = document.createElement("div");
	alert.style.cssText = `position:absolute;left:50%;top:50%;z-index:99999;transform: translate(-50%,-50%);color:white;font-size:18px;border-radius:10px;box-shadow:inset 0px 0px 8px #fff;background-color: rgba(0,0,0,0.5);overflow:hidden;`;
	alert.style.width = w+"px";
	alert.style.minHeight = h+"px";

	var title = document.createElement("p");
	title.innerHTML = mTitle+":";
	title.style.cssText = `margin:10px 0 10px 10px;`;

	var con = document.createElement("p");
	con.style.cssText = `display:flex;justify-content:center;align-items:center;padding:0px 10px 0px;margin-bottom:10px;font-size:16px;word-break:break-all;`;
	con.innerHTML = infoTips;

	alert.appendChild(title);
	alert.appendChild(con);
	document.body.appendChild(alert);
	setTimeout(function(){
		document.body.removeChild(alert);
	},duration);		
}

结束

大家喜欢的话可以关注一下。

下一篇，原生js写 加载中… 效果

先附上效果图：