javascript基于对象的弹出框封装

先睹为快，移动端：戳这里，打开页面后点击投票查看效果。PC端测试直接切换body的overflow属性:hidden和auto一样可以，比下面相对简化，又有人说这样偶尔不行。。如果你知道优缺点欢迎给出。。。。

说明：1、DOM元素必须，2、弹出框样式：必须，3、弹出框逻辑必须，4、如何使用，需要的时候直接调用：promptObj.init(msg),msg：弹出框的提示信息，不传默认是：請問你想幹嘛？

封装很简单，关键就是弹出框弹出后如何阻止页面继续滚动，经过测试目前没问题，关于指出问题。缺点：暴露在全局的对象

1、必须的DOM元素，放在BODY尾部

<!-- 自定义alert框 -->
        <div id="prompt_box">
            <div class="prompt_mask">
                <p>友情提示：</p>
                <h2 id="prompt_title" class="prompt_title"></h2>
                <span id="prompt_btn">確 認</span>
            </div>
        </div>

2、DOM元素的样式表

/*
* @Author: wangjianfei
* @Date:   2017-05-26 17:24:39
* @Last Modified by:   wangjianfei
* @Last Modified time: 2017-05-26 19:33:57
*/
*{
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
    box-sizing: border-box;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
}
#prompt_box{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    display: none;
    z-index: 30;
}
.prompt_title{
    text-align: center;
    color: #565CB2;
    margin-top: .5rem;
}
.prompt_mask p{
    width: 100%;
    height: 1rem;
    color: #fff;
    line-height: 1rem;
    background: #565CB2;
    padding-left: .3rem;
    font-size: .4rem;
}
.prompt_mask{
    width: 7.4rem;
    height: 4.2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: .1rem;
    overflow: hidden;
}

#prompt_btn{
    display: block;
    background: #565CB2;
    color: #fff;
    width: 1.5rem;
    height: .8rem;
    line-height: .8rem;
    text-align: center;
    margin: 0 auto;
    margin-top: .8rem;
    border-radius: .1rem;
    font-size: .3rem;
    cursor: pointer;
}

3、弹出的逻辑

/*
* @Author: wangjianfei
* @Date:   2017-05-26 18:08:36
* @Last Modified by:   wangjianfei
* @Last Modified time: 2017-05-27 10:22:26
*/

'use strict';
var promptObj={
    // 1、弹出框ID
    promptBox:null,
    // 2、提示信息的元素ID
    infoItem:null,
    // 3、确认按钮ID
    promptBtn:null,
    // 4、提示信息具体内容，没传就默认是：請問你想幹嘛？
    tipsMsg:null,
    // 5、是PC还是手机:true为PC，false为手机端，用于阻止弹出框弹出后页面是否可以滚动
    isPC:true,
    // 6、初始化对象
    init:function(msg){
        //1、 指定元素
        this.promptBox=document.getElementById("prompt_box");
        this.infoItem=document.getElementById("prompt_title");
        this.promptBtn=document.getElementById("prompt_btn");
        // 2、是否是PC
        this.platform();
        // 3、显示弹出框 promptBtn
        this.showPrompt(msg);
    },
    // 7、设备判断
    platform:function(){
        var _this=this;
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
                    "SymbianOS", "Windows Phone",
                    "iPad", "iPod"];
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                _this.isPC= false;
                break;
            }
        }
    },
    // 8、隐藏弹出框
    hidePrompt:function(){
        promptObj.promptBox.style.display="none";
    },
    // 9、显示弹出框，并禁止页面继续
    showPrompt:function(msg){
        var _this=this;
        // console.log(_this.isPC);
        // 提示信息
        _this.tipsMsg=msg||"請問你想幹嘛？";
        _this.infoItem.innerHTML=_this.tipsMsg;
        _this.promptBox.style.display="block";
        _this.promptBtn.addEventListener("click", _this.hidePrompt);
        // 2、如果是PC端
        if(_this.isPC){
            // PC端弹出框弹出后阻止页面滚动
            var top=-1;
            var scrollTop = document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;
            _this.promptBox.addEventListener("mouseenter", function(){
                top=scrollTop;
                // console.log(top);
            });
            _this.promptBox.addEventListener("mouseleave", function(){
                top=-1;
            });
            window.addEventListener("scroll",function(event){
                event.preventDefault();
                // console.log(scrollTop);
                if(top!==-1){
                    document.body.scrollTop=scrollTop;
                    window.pageYOffset=scrollTop;
                    document.documentElement.scrollTop=scrollTop;
                    // console.log(scrollTop);
                }
            });
        // 3、如果是移动端
        }else{
            // 移动端阻止弹出层弹出时候页面的滚动
            _this.promptBox.addEventListener("touchmove", function(event){
                // 阻止彈出後頁面的滚动
                event.preventDefault();
            });
        }
    }
}
// promptObj.init();