说到javascript弹出框的制作,将其实现步骤分开，其实很容易。
下面，将拆分页面弹出框的制作步骤。
首先，准备编辑工具(废话)，其实，您可以使用notepad..嘿嘿。
弹出框的组成结构：
  1.一个页面遮罩层。
  2.一个div容器，用来包含整个弹出框的布局。
  3.弹出框的菜单头(在弹出框的顶部，一般用来放置关闭按钮等)
  4.弹出页面的iframe，将其src设置为需要链接的url.

弹出层组成结构讲解完毕，开始实现弹出层对象。
首先，先实现常见的公共函数

            //获取页面指定ID的对象var $$=function(id)

            {return typeof id=="string"?document.getElementById(id):id;

            }//获取页面指定tagName的对象var $E=function(tagName)

            {return document.getElementsByTagName(tagName)[0];

            }//创建对象 通过原型的继承function New(aClass,aParams)

            {function new_()

            {

            aClass.initialize.apply(this,aParams);

            }

            new_.prototype=aClass;return new new_();

            }
        

好了  公共函数实现完毕，进入最关键的对象的创建了。
还是一步步来吧，首先，实现创建遮罩层的函数

            var makeMask=function()

            {var mask=$$("overlay_div");if(mask==null)

            {

            mask=document.createElement("div");//遮罩层div mask.setAttribute("id","overlay_div");//设置id为overlay_div mask.className="light_overlay";//设置高度和宽度 mask.style.height=window.screen.availHeight>document.body.scrollHeight?window.screen.availHeight:document.body.scrollHeight;

            mask.style.width=window.screen.availWidth>document.body.scrollWidth?window.screen.availWidth:document.body.scrollWidth;

            $E("body").appendChild(mask);

            }return mask;

            }
        

遮罩层创建完毕
就开始创建一个div容器 并将设置容器的内部html代码

            var makeContent=function(_width,_height,_url)

            {var container=$$("container_div");if(container==null)

            {

            container=document.createElement("div");

            container.setAttribute("id","container_div");

            container.style.height=_height;

            container.style.width=_width;var v_left=document.body.clientWidth/2-_width/2;var v_top=document.body.scrollTop+document.body.clientHeight/2-_height/2;//设置容器距离顶部和左边的宽度。 container.style.top=v_top;

            container.style.left=v_left;

            container.className="light_container";//在容器内部添加一个菜单头和一个指向给定url的iframe container.innerHTML="<div class='light_header'><a class='light_close'
οnclick='closeDialog()'>关闭</a></div><iframe frameborder='0' scrolling='no'
style='border:0;width:100%;height:98%;' src='"+_url+"'></iframe>"$E("body").appendChild(container);

            }return container;

            }
        

给出关闭弹出层的函数，就是将建立的两个层隐藏就可以了。

function closeDialog(result)
{
$$("container_div").style.display="none";
$$("overlay_div").style.display="none";
}

最后一步 就是显示弹出层对象了。我们需要将前面两函数联合起来

            var displayLayer=function(width,height,url,display)

            {this._mask=makeMask();this._container=makeContent(width,height,url);this._mask.style.display=display==""?"none":display;this._container.style.display=display==""?"none":display;

            }
        

好了 基本的框架已经搭建出来了 现在给出css样式代码

.light_overlay{display:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;background-color:#333;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);}.light_container{position:absolute;display:none;z-index:1001;border: 1px solid #B8B8B8;background-color: white; }.light_header{background:#D3F9F0;text-align:right;}.light_close{height:28px;cursor:pointer;font-size:12px;line-height:28px;margin-right:4px;}

然后我们直接调用
displayLayer(400,300,'show.html',"block");函数就可以显示弹出层了。

其实，我们可以将弹出层看成一个对象，达到javascrpt对象的封装,利于复用.
函数已经有了，我们只需要将函数整合就可以了,代码如下：

            var LightBox={

            initialize:function(url,width,height)

            {this._url=url;this._width=width;this._height=height;this._mask=this.makeMask();this._container=this.makeContent();

            },

            makeMask:function()

            {var mask=$$("overlay_div");if(mask==null)

            {

            mask=document.createElement("div");

            mask.setAttribute("id","overlay_div");

            mask.className="light_overlay";

            mask.style.height=window.screen.availHeight>document.body.scrollHeight?window.screen.availHeight:document.body.scrollHeight;

            mask.style.width=window.screen.availWidth>document.body.scrollWidth?window.screen.availWidth:document.body.scrollWidth;

            $E("body").appendChild(mask);

            }return mask;

            },

            makeContent:function()

            {var container=$$("container_div");if(container==null)

            {

            container=document.createElement("div");

            container.setAttribute("id","container_div");

            container.style.height=this._height;

            container.style.width=this._width;var v_left=document.body.clientWidth/2-this._width/2;var v_top=document.body.scrollTop+document.body.clientHeight/2-this._height/2;

            container.style.top=v_top;

            container.style.left=v_left;

            container.className="light_container";

            container.innerHTML="<div class='light_header'><a class='light_close'
οnclick='closeDialog()'>关闭</a></div><iframe frameborder='0' scrolling='no'
style='border:0;width:100%;height:98%;' src='"+this._url+"'></iframe>"$E("body").appendChild(container);

            }return container;

            },

            displayLayer:function(display)

            {this._mask.style.display=display==""?"none":display;this._container.style.display=display==""?"none":display;

            }

            }
        

当我们需要使用弹出框的时候就可以直接New一个对象
如下：

//创建对象
    var lightbox_example=New(LightBox,[url,width,height]);

//显示弹出层
    lightbox_example.displayLayer("block");

您可以点击此处 下载代码