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

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

代码片段 1

<!DOCTYPE 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
赞(0)
64K

评论 抢沙发

评论前必须登录!