自己封装的弹出层插件

Posted 归尘2016

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自己封装的弹出层插件相关的知识，希望对你有一定的参考价值。

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 视口，屏幕的宽度1：1，不允许缩放 -->
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <!--  浏览器不缓存，每次都去服务器拉取 -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <!-- 不自动识别手机号码 -->
    <meta name="format-detection" content="telephone=no" >
    <title>测试弹框组件</title>
    <link rel="stylesheet" href="popup.css">
</head>
<body>
      <div id="dian"> 点击事件</div>
</body>
<script type="text/javascript" src="app_popup.js"></script>
<script>
    var dian=document.getElementById("dian");
      dian.addEventListener("click",function(){
        popup.open({
            /* width:"500",*/ //设置弹出层宽度，如果不填写为300
            /*height:"300",*/ //设置弹出层高度，如果不填写为150
            title:"弹出层标题",//设置标题
             content:"这条数将不可恢复!",//设置内容
             cancelBoolse:1,//1为确定，取消按钮都有，2为只有确定按钮，3为只有取消按钮
             cancelBtn:"取消",//设置关闭文字
             submitBtn:"确定",//设置确定文字
             submitCallBack:submitCallBack,//设置确定的回调函数
             closeCallBack:closeCallBack //设置关闭的回调函数
        });
    });
    /* 确定回调函数*/
 function submitCallBack(){
     //alert(11);
 }
 /* 关闭回调函数*/
 function closeCallBack(){
     //alert(11);
 }
</script>
</html>

JS代码

/*设置几种弹出层*/
(function(window,undefined){
   var popup=function(){};
   popup.prototype={
           open:function(options){
                this.opt=options;
                this.popHtml();
                this.popStyle();
                
                //解决点击延迟与按钮生成之间的冲突 
                if(document.getElementById("cancelBtn")){
                    setTimeout(this.closeCallBack(),300);
                };
                if(document.getElementById("submitBtn")){
                    setTimeout(this.submitCallBack(),300);
                };
        },
           popHtml:function(){
                 var str="";
            str+="<div id=\"popUp\"  style=\"opacity:0;\" class=\"popUp\"><h2>"+this.opt.title+"</h2>";
               str+="<div class=\"popUp_cont\">"+this.opt.content+"</div>";
            if(this.opt.cancelBoolse==1){
                 str+="<div class=\"popUp_btn\"><span id=\"submitBtn\" class=\"spanBlue\">"+this.opt.submitBtn+"</span><span id=\"cancelBtn\">"+this.opt.cancelBtn+"</span></div></div>";
            }else if(this.opt.cancelBoolse==2){
                 str+="<div class=\"popUp_btn\"><span id=\"submitBtn\" class=\"spanBlue\">"+this.opt.submitBtn+"</span></div></div>";
            }else if(this.opt.cancelBoolse==3){
                 str+="<div class=\"popUp_btn\"><span id=\"cancelBtn\">"+this.opt.cancelBtn+"</span></div></div>";
            }
               str+="<div id=\"popMask\" class=\"popMask\"></div>";
               document.body.innerHTML=str;
           },
           //设置元素的宽度和高度
           popStyle:function(){
               var popUp=document.getElementById("popUp");
               var w=(this.opt.width !="" || this.opt.width != undefined) ? this.opt.width+"px":300+"px";
               var Wleft=(this.opt.width !="" || this.opt.width != undefined) ? "-"+this.opt.width/2+"px" : "-"+300/2+"px";
               var h=(this.opt.height !="" || this.opt.height != undefined) ? this.opt.height+"px":130+"px";
               var hTop=(this.opt.height !="" || this.opt.height != undefined) ? "-"+this.opt.height/2+"px" : "-"+130/2+"px";
               popUp.style.cssText = "width:"+w+";height:"+h+";margin-left:"+Wleft+";margin-top:"+hTop+"";
               this.animatIn();
           },
           //设置弹出层动画
           animatIn: function(){
            var andom = document.getElementById("popUp");
            var thisOpacity=0;
            var otime = setInterval(function(){
                   thisOpacity += 0.1;
                   andom.style.opacity = thisOpacity;
                   andom.style.filter="alpha(opacity=" + thisOpacity*100 + ")";
                   if(andom.style.opacity>=1){
                     clearInterval(otime);    
                   }
            },20);
        },
           //添加关闭回调函数
           closeCallBack:function(){
               var cancelBtn=document.getElementById("cancelBtn");
              cancelBtn.addEventListener("click", this.closeDiv);
              cancelBtn.addEventListener("click", this.opt.closeCallBack);
              
          },
          //删除弹出层和遮罩层
          closeDiv:function(){
              var popUp=document.getElementById("popUp");
              var popMask=document.getElementById("popMask");
            document.body.removeChild(popUp);
            document.body.removeChild(popMask);
          },
          //添加确定返回函数
          submitCallBack:function(){
              var submitBtn=document.getElementById("submitBtn");
              submitBtn.addEventListener("click", this.closeDiv);
              submitBtn.addEventListener("click", this.opt.submitCallBack);
          }   
   };
   window.popup=popup;
})(window,undefined);
var popup = new popup();

CSS样式

 *{
    padding:9;
    margin:0;
}
.popMask{
    position: fixed;
    width:100%;
    height:100%;
    background: #000;
    z-index:100;
    opacity: 0.1;
}
.popUp{
    position:fixed;
    width:300px;
    min-height:130px;
    border:1px solid #f2f5f7;
    left:50%;
    top:50%;
    margin-left:-150px;
    margin-top:-150px;
    z-index: 101;
    background: #fff;
    border-radius:4px;
    -webkit-opacity: 0;  
    -moz-opacity: 0;   
    opacity: 0;
}
.popUp h2{
    height:40px;
    background:#f8f6f6;
    line-height: 40px;
    font-size:12px;
    text-indent:10px;
    border-radius:4px 4px 0 0;
}
.popUp_cont{
    padding:10px;
    word-wrap:break-word; 
    white-space:normal; 
    word-break:break-all; 
    text-indent:2em;
    font-size:12px;
    
}
.popUp_btn{
    text-align: center;
    height:50px;
    line-height:50px;
}
.popUp_btn span{
    padding:5px 10px;
    background: #F0EFEE;
    border:1px solid #e8e8e8;
    font-size: 12px;
    border-radius:2px;
    cursor: pointer;
}
.popUp_btn span.spanBlue{
    background: #33a7e3;
    border: 1px solid #2590ee;
    color:#fff;
}
.popUp_btn span:nth-child(2){
    margin-left:10px;
}

 

以上是关于自己封装的弹出层插件的主要内容，如果未能解决你的问题，请参考以下文章

angularjs怎么编写一个公共的弹出层插件

自己封装一个弹框插件

4.弹出层组件的实现与封装

js漂亮的弹出层

nuxt+vue+vant --- SSR- h5 公共底部弹出层组件

nuxt+vue+vant --- SSR- h5 公共底部弹出层组件