原生JS编写popup

适用于微信公众号等各种手机页面端

js脚本

(function (window) { var sohanPopup = function(data){ //+body+ var body = document.getElementsByTagName('body')[0]; body.style.position = 'relative'; //+底色框-----------------------+ //创建 var tempPopup = document.createElement("div");//创建底色div tempPopup.id = data.name.name1; body.appendChild(tempPopup);//添加tempPopup到body里面 //获取 var popupTLF = document.getElementById(data.name.name1); //宽高样式 popupTLF.style.height = document.documentElement.clientHeight+'px'; popupTLF.style.width = document.documentElement.clientWidth+'px'; //其它样式 popupTLF.style.position = 'absolute'; popupTLF.style.backgroundColor = data.Dcolor||'#6b6767'; popupTLF.style.top = 0; popupTLF.style.left = 0; popupTLF.style.zIndex =998; popupTLF.style.opacity =.6; popupTLF.style.display ='none'; //+内容框--------------------------------+ //创建 var tempPopupC= document.createElement("div");//创建中间内容div tempPopupC.id = data.name.name2; body.appendChild(tempPopupC);//添加tempPopupC到body里面1 //获取 var popupTLFC = document.getElementById(data.name.name2); //样式 popupTLFC.style.height = (document.documentElement.clientHeight * data.centent.height)+'px'; popupTLFC.style.width = (document.documentElement.clientWidth * data.centent.width)+'px'; popupTLFC.style.marginLeft = (-document.documentElement.clientWidth * data.centent.width /2)+'px'; popupTLFC.style.marginTop = (document.documentElement.clientHeight *.05)+'px'; popupTLFC.style.backgroundColor = data.centent.Dcolor || '#fff'; popupTLFC.style.position = 'absolute'; popupTLFC.style.top = data.centent.topHeight; popupTLFC.style.left = '50%'; popupTLFC.style.zIndex = 999; popupTLFC.style.borderRadius = '10px'; popupTLFC.style.display = 'none'; //+内容框+--->上 //创建 var tempPopupCT= document.createElement("div");//创建中间内容-上div tempPopupCT.id = data.name.name3; popupTLFC.appendChild(tempPopupCT);//添加tempPopupCT到body里面 //获取 var popupTLFCT = document.getElementById(data.name.name3); //样式 popupTLFCT.style.height = (document.documentElement.clientHeight * data.centent.height - 42)+'px'; popupTLFCT.style.width = (document.documentElement.clientWidth * data.centent.width)+'px'; popupTLFCT.style.boxSizing ='border-box' ; popupTLFCT.style.padding ='20px 20px 0 20px' ; popupTLFCT.style.overflow ='auto' ; //创建内容 var tempSpan= document.createElement("span");//创建中间内容-上div tempSpan.innerText = '*温馨提示'; tempSpan.id = data.name.name4; popupTLFCT.appendChild(tempSpan);//添加tempPopupCT到body里面 //获取第一个span(*温馨提示) var firstSpan = document.getElementById(data.name.name4); firstSpan.style.marginTop = '0px'; firstSpan.style.color = '#d95737'; firstSpan.style.display = '#block'; firstSpan.style.marginTop = '8%'; firstSpan.style.fontSize = '16px'; var tempArr = data.datas; for(var i=0; i<tempArr.length; i++){ var otherSpan = popupTLFCT.appendChild(document.createElement("span")); otherSpan.innerText = tempArr[i]; otherSpan.style.display = 'block'; otherSpan.style.marginTop = data.centent.distance || '5%'; otherSpan.style.fontSize = data.centent.size || '16px'; otherSpan.style.color = data.centent.color || '#0c314e'; } //+内容框+--->下 //创建 var tempPopupCB= document.createElement("div");//创建中间内容-上div tempPopupCB.innerText = '关闭'; tempPopupCB.id = data.name.name5; popupTLFC.appendChild(tempPopupCB);//添加tempPopupCT到body里面 //获取 var popupTLFCB = document.getElementById(data.name.name5); //样式 popupTLFCB.style.position ='absolute' ; popupTLFCB.style.width ='100%' ; popupTLFCB.style.height ='40px' ; popupTLFCB.style.bottom =0 ; popupTLFCB.style.lineHeight = '40px' ; popupTLFCB.style.textAlign = 'center' ; popupTLFCB.style.fontSize = '16px' ; //->变量的值 //边框颜色 popupTLFCB.style.borderTop = '1px solid '+ data.close.Tcoloe; //字体颜色 popupTLFCB.style.color = data.close.color || '#46bbc5' ; //关闭的点击事件 popupTLFCB.onclick = function(){ popupTLF.style.display = 'none'; popupTLFC.style.display = 'none'; }; //打开的点击事件 var testBtn = document.getElementById(data.id); testBtn.onclick = function(){ popupTLF.style.display = 'block'; popupTLFC.style.display = 'block'; }; }; window.sohanPopup = sohanPopup; })(window);

调用方式

ohanPopup({ //不一样就行 name:{ name1:'tlf1', name2:'tlf2', name3:'tlf3', name4:'tlf4', name5:'tlf5', }, id:'paycard_btn',//点击事件的id Dcolor:'',//底层颜色(默认为#6b6767) centent:{ width:0.8,//中间框宽占比 height:0.8,//中间框高占比 topHeight:'5%',//上边距 Dcolor:'',//中间底色(默认为#fff) size:'',//字体大小(默认为16px) color:'',//字体颜色(默认为#0c314e), distance:'3%'//数据之间的行距(默认是5%) }, close:{ color:'',//关闭字体颜色(默认#46bbc5), Tcoloe:'#eee'//边框颜色 }, //呈现的数据 datas:[ '1、我是第1行', '2、我是第2行', '3、我是第3行', '4、我是第4行' ] });

效果图