初探弹出层的实现原理

首先用几句话来描述一下实现过程，好有个思路嘛^^：（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); //设置IDvar _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);' οnclick='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>";//iframevar _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);' οnclick='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(\"打开弹出层\");' οnclick='openDialog();'>打开弹出层</a></p>"}new myLayer(opts).open();}</script>