适用移动web的简单的文本弹出提示框
摘要：前端开发面试考卷 前端开发需要学啥 软件开发与前端测试 代码片段 1 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <meta name=”viewport”……
前端开发面试考卷 前端开发需要学啥 软件开发与前端测试
代码片段 1
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no” />
<title>简单的文本弹出提示框,适用移动web</title>
</head>
<body>
<script>
//调用代码:
//msgText.init(text,timer)
//text：提示框显示文本,类型String
//timer:提示框显示时间,不设置为永久显示 单位为毫秒ms
var msgText = {
init: function (text, timer) {
var _cssText = “position: fixed;top: 50%;margin: 0 auto;background: rgba(0, 0, 0, 0.63);color: #fff;padding: 2px 15px;left: 50%;margin:-16px 0 0 -85px;line-height: 2;border-radius: 5px;width: 170px;-webkit-transition:all 0.3s linear;transition:all 0.3s linear”;
this.oP = document.createElement(“p”);
this.oP.innerHTML = text;
this.setCss(_cssText);
this.show();
timer && (this.hide(timer));
},
show: function () {
document.body.appendChild(this.oP);
},
hide: function (timer) {
var _this = this;
setTimeout(function () {
_this.oP.style.opacity = “0”;
setTimeout(function () {
document.body.removeChild(_this.oP);
}, 300)
}, timer)
},
setCss: function (csstext) {
this.oP.style.cssText = csstext;
}
}
//调用代码
msgText.init(“主题不存在或已被删除”, 3000)
</script>
</body>
</html>
简单的弹出提示框，适用移动web
css样式可随意设置，让它也能适用pc
有自动关闭功能
//调用代码:
//msgText.init(text,timer)
//text：提示框显示文本,类型String
//timer:提示框显示时间,不设置为永久显示 单位为毫秒ms
前端开发面试之浏览器的内核 前端开发还需要会ps吗 企业前端开发软件
» 本文来自：前端开发者 » 《适用移动web的简单的文本弹出提示框》
» 本文链接地址：https://www.rokub.com/5589.html
» 您也可以订阅本站：https://www.rokub.com
近期评论