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

说到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对象的封装,利于复用.
函数已经有了，我们只需要将函数整合就可以了,代码如下：

代码