說到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");

?

您可以點擊此處 下載代碼

轉載于:https://www.cnblogs.com/trampt/archive/2010/08/10/1796780.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的[原]一步一步自己制作弹出框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。