一个简单的文字提示框,可用于接口数据返回失败时的文字提示,或用户错误操作时的提示
<!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>