标签：showTips 自定义 js alert objInfo var 提示框

原生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写 加载中… 效果

先附上效果图：

标签：showTips,自定义,js,alert,objInfo,var,提示框
来源： https://blog.csdn.net/qq_52722885/article/details/117930921

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。