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

前言

一、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{}

三、实际使用展示如下：