首页 > 代码库 > 初探弹出层的实现原理
初探弹出层的实现原理
首先用几句话来描述一下实现过程，好有个思路嘛^^：（1）先创建一个div层将整个屏幕罩住（所谓的遮罩层），可设置该层的属性，例如透明度（2）在遮罩层内创建div来展示内容（这里暂时称为内容展示层），在该层就可以灵活的创建个人需要的HTML组件了。例如你在内容展示层中创建了一个iframe，嘿嘿，你就可以请求指定的URL并将其返回的内容呈现在这个iframe之中。
下面就赶紧来看看如何实现吧
1、先上HTML代码
<body> <div>body content</div> <a href="javascript:void(‘打开弹出层‘);" onclick="openDialog();">打开弹出层</a> </body>
呵呵
2、上Javascript部分
看上去有点儿长^^
<script> window.myLayers = {}; myLayer = function(opts){ //默认参数 var params = { width: 500, height: 370, title: ‘我的窗口‘, btnWrapH: 37, titleWrapH: 31, opacity: 0, mask: true, okClick: function(){} } //设置参数 opts = opts ? opts : {}; this.mask = (opts.mask == true || opts.mask == false) ? opts.mask : params.mask; this.okClick = opts.okClick ? opts.okClick : params.okClick; this.url = opts.url ? opts.url : ""; this.content = opts.content ? opts.content : null; this.width = opts.width ? opts.width : params.width; this.height = opts.height ? opts.height : params.height; this.title = opts.title ? opts.title : params.title; this.btnWrapH = opts.btnWrapH ? opts.btnWrapH : params.btnWrapH; this.titleWrapH = opts.titleWrapH ? opts.titleWrapH : params.titleWrapH; this.opacity = opts.opacity ? opts.opacity : params.opacity; this.id = opts.id ? opts.id : parseInt(Math.random()*10000); //设置ID var _top = window; while(_top && (_top.parent != _top.self) && _top.parent.frames.length == 0){ _top = _top.parent; } this.left =_top.document.documentElement.clientWidth && _top.document.body.clientWidth/2 - this.width/2; this.top = _top.document.documentElement.clientHeight && _top.document.body.clientHeight/2 - this.height/2; this.left = this.left < 0 ? 0 : this.left; this.top = this.top < 0 ? 0 : this.top; //保存，便于在方法之间引用 myLayers[this.id] = this; }; //核心方法 myLayer.prototype.open = function(){ //定义遮罩层 var _maskDiv = "<div id=‘_maskDiv_"+this.id+"‘ style=‘position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #ccc; margin: 0; opacity: "+this.opacity+"; filter: alpha(opacity="+(this.opacity*100)+");‘></div>" //按钮 var _wrapBtn = "<div style=‘height: "+this.btnWrapH+"px; width: 100%; background-color: #20B2AA; position: relative;‘><a href=‘javascript:void(0);‘ onclick=‘myLayers[\""+this.id+"\"].cancelBtnClick(\""+this.id+"\");‘ style=‘float: right; display: inline-block; margin-right:10px; color: green;background-color: white; padding: 1px 10px; height: 27px; margin-top: "+((this.btnWrapH - 29)/2)+"px; line-height: 27px; text-decoration: none;‘>关闭</a><a href=‘javascript:void(0);‘ onclick=‘myLayers[\""+this.id+"\"].okBtnClick(\""+this.id+"\");‘ style=‘float: right; display: inline-block; margin-right: 10px; color: green; padding: 1px 10px; margin-top: "+((this.btnWrapH - 29)/2)+"px; height: 27px; line-height: 27px; background-color: white; text-decoration: none;‘>确认</a></div>"; //iframe var _iframe = "<iframe style=‘width: 100%; height: "+(this.height-(this.titleWrapH+10)-this.btnWrapH)+"px; background-color: white; overflow: auto; ‘ src=‘"+this.url+"‘ frameborder=‘0‘></iframe>"; //content属性优先 var _content = this.content ? this.content : _iframe; //内容展示层 var _wrapIframe = "<div id=‘_wrapIframe_"+this.id+"‘ style=‘border: 1px solid #E0FFFF; position: absolute; left: "+this.left+"px; top: "+this.top+"px; margin: 0 auto; padding: 0; width: "+this.width+"px; height: "+this.height+"px; background-color: white;‘><h3 style=‘position: relative; margin: 0; padding: 5px 0 5px 10px; height: 31px; line-height: 31px; background-color: #20B2AA; overflow: hidden;‘><a style=‘height: "+this.titleWrapH+"px; line-height: "+this.titleWrapH+"px; float: right; top: 31px; margin-right: 20px; padding: 3px 10px; font-size: 17px;‘ href=‘javascript: void(0);‘ onclick=‘myLayers[\""+this.id+"\"].closeLayer(\""+this.id+"\");‘>关闭</a><span style=‘overflow: hidden;‘>"+this.title+"</span></h3><div style=‘width: 100%; height: "+(this.height-(this.titleWrapH+10)-this.btnWrapH)+"px;‘>"+_content+"</div>"+_wrapBtn+"</div>"; var body = window.document.body; //是否显示遮罩层 if(this.mask == true){ body.innerHTML = body.innerHTML + _maskDiv; } body.innerHTML = body.innerHTML + _wrapIframe; }; //关闭 myLayer.prototype.closeLayer = function(layerId){ var _w = document.getElementById("_wrapIframe_"+layerId); _w.parentNode.removeChild(_w); var _m = document.getElementById("_maskDiv_"+layerId); _m && _m.parentNode.removeChild(_m); }; //事件 myLayer.prototype.okBtnClick = function(layerId){ myLayers[layerId].closeLayer(layerId); myLayers[layerId].okClick(); }; myLayer.prototype.cancelBtnClick = function(layerId){ myLayers[layerId].closeLayer(layerId); }; //调用打开弹出层 function openDialog(){ var opts = { opacity: 0.31, title: ‘我的标题‘, height: 430, width: 560, url: "layer.htm", mask: true, okClick: function(){ alert("我被执行了。OK,可以提交表单了。"); }, content: "<p style=‘color: red;‘><a href=‘javascript:void(\"打开弹出层\");‘ onclick=‘openDialog();‘>打开弹出层</a></p>" } new myLayer(opts).open(); } </script>
以上就是全部代码
仅仅是初探。
附上执行档地址：http://www.zhaojz.com.cn/demo/layer.htm
初探弹出层的实现原理
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。