[原]一步一步自己制作弹出框

说到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' 

onclick='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' 

onclick='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");

 

您可以点击此处 下载代码