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

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

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

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

             
     
            
      
                
       
友情提示：
                
       
                
       確 認            
      
        
     

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();