说到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;
=window.screen.availWidth>document.body.scrollWidth?
mask.style.widthwindow.screen.availWidth:document.body.scrollWidth;
"body").appendChild(mask);
$E(
}
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;
=window.screen.availWidth>document.body.scrollWidth?
mask.style.widthwindow.screen.availWidth:document.body.scrollWidth;
"body").appendChild(mask);
$E(
}
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");
您可以点击此处 下载代码
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。