js移动端文字提示框

最新推荐文章于 2024-05-29 16:26:38 发布

caicaicai404

最新推荐文章于 2024-05-29 16:26:38 发布

阅读量4.5k

点赞数 1

分类专栏： js 文章标签： js 提示框

本文链接：https://blog.csdn.net/caimingxian401/article/details/79864648

版权

js 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

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

<!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>

caicaicai404

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
js移动端文字提示框

一个简单的文字提示框，可用于接口数据返回失败时的文字提示，或用户错误操作时的提示 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"/>
复制链接

扫一扫