适用移动web的简单的文本弹出提示框

前端开发面试考卷前端开发需要学啥软件开发与前端测试

代码片段 1

<!DOCTYPE html>

<html>

<head>

<title>简单的文本弹出提示框,适用移动web</title>

</head>

<body>

//调用代码:

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

适用移动web的简单的文本弹出提示框

前端开发者

相关推荐

评论抢沙发

友情链接

回顶部

前端开发者

相关推荐

评论 抢沙发

友情链接

回顶部

评论抢沙发