首页 > 代码库 > 自己封装的弹出层插件
自己封装的弹出层插件
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;}
自己封装的弹出层插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。