原生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行'
            ]
        });

效果图