兼容web端和手机端的弹窗插件,（弹窗内可滑动，并可阻止下面的页面滑动）

前言

电脑端、手机端通用弹窗插件，原生js编写。允许弹窗内部滚动，同时，防止弹窗下面的页面滚动。

一、js内容

popup: {
        isInit: false,
        isOpen: false,
        parseDom: function(str){
            var div = document.createElement("div");
            div.innerHTML = str;
            return div.childNodes;
        },
        init: function(width, height){
            var popHtml = "<div class='popup' style='width:100%;height:100%; z-index: 9999;-webkit-transition: all ease 700ms;" +
                            "position: fixed;top:0;left: 0;background-color: rgba(0,0,0,0.8);display: none;'>"+
                                "<div class='middle' style='display: table-cell;vertical-align: middle;text-align: center;'>"+
                                    "<div class='inner' style='display: inline-block;'>"+
                                        "<div class='content' style='width:"+ width + ";height:" + height + ";background-color:white;word-break: break-all;-webkit-overflow-scrolling:touch;box-sizing:border-box;color: black;padding:20px;position:relative;'></div>"+
                                    "</div>"+
                                "</div>"+
                          "</div>";
            document.body.appendChild(this.parseDom(popHtml)[0]);
            this.isInit = true;
        },
	/*
		width: 弹窗宽度  height：弹窗高度
		contentHtml：弹窗内容
	*/
        toast: function(width, height, contentHtml){
            if(!this.isInit){
                this.init(width, height);
            }
            this.isOpen = true;
            var content = document.querySelector(".popup .middle .inner .content");
            content.innerHTML = contentHtml;
            document.querySelector(".popup").style.display = "table";
            var viewPortWidth = document.documentElement.clientWidth;
            if(viewPortWidth > 600){
                //web端，防止下部页面滑动
                document.body.style.overflow = "hidden";
            }else{
                //手机端，防止下部页面滑动，其中，country_detail为页面最顶层的元素，包含除了弹窗以外的其他所有内容
                document.querySelector(".country_detail").style.position = "fixed";
            }
        },
        close: function(){
            this.isOpen = false;
            document.body.style.overflow = "scroll";  //允许web端弹窗下面页面滚动
            document.querySelector(".country_detail").style.position = "relative"; //允许web端弹窗下面页面滚动
            document.querySelector(".popup").style.display = "none";
        },
    }

二、使用方法

popup.toast("722px","424px",html); html为你要添加的页面片段，
css方面，你在其中添加了什么，就对相应的内容添加样式文件，比如：html为<div class="center">ddd</div>, 则添加的样式为.popup .center{}

三、实际使用展示如下：

web端：

手机端：