JS

首页 -  JS  -  一个简单的文字提示框,可用于接口数据返回失败时的文字提示,或用户错误操作时的提示

一个简单的文字提示框,可用于接口数据返回失败时的文字提示,或用户错误操作时的提示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, 
minimal-ui"/>
		<title></title>
		<style type="text/css">
			.text-tip {
			    display: block;
			    background:rgba(0,0,0,.7);
			    color: #fff;
			    padding: 10px 10px;
			    line-height: 18px;
			    position: fixed;
			    left: 50%;
			    bottom: 25%;
			    -webkit-transform: translate(-50%);
			    transform: translate(-50%);
			    border-radius: 3px;
			    display: none;
			    z-index: 9999;
			    font-size: 12px;
			    text-align: center;
			}
		</style>
	</head>
	<body>
	<script>
		function textTip(str, t, callBack) {
		    t = t || 2000;
		    var dom = document.createElement("p");
		    dom.setAttribute('class', 'text-tip');
		    document.body.appendChild(dom);
		    var mytip = document.querySelector('.text-tip')
		    
		    mytip.style.display="block";
		    mytip.innerHTML = str;
		    var tipHeight = mytip.offsetHeight;
		    
		    //文字两行或两行以上
		    if((tipHeight - 20)/18>1){
		    	mytip.style.width = "55%";
		    }
		    setTimeout(function () {
		        mytip.style.display="none";
		        mytip.parentNode.removeChild(mytip);
		        if (callBack) {callBack();}
		    }, t);
		}
		
		textTip('2秒消失的提示框', 2000, function () {
		    console.log('提示框消失后,执行的回调。时间t与回调函数callBack可传可不传');
		});
	</script>
	</body>
</html>


(0)
分享:

本文由:xiaoshu168.com 作者:xiaoshu发表,转载请注明来源!

标签:

相关阅读