DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript 窗口加載蒙板 內嵌網頁內容
javascript 窗口加載蒙板 內嵌網頁內容
編輯:關於JavaScript     
復制代碼 代碼如下:
//初始化導航背景,iframe容器
function fnDaoHangBg()
{
var h = fnGetHeight(),w = fnGetWidth();//獲取背景窗口大小
if(!$('divDaoHangBg'))
{
var div = $C('div');//創建背景蒙板
div.id = 'divDaoHangBg';
div.style.backgroundColor = 'black';
div.style.position = 'absolute';
div.style.filter = 'alpha(opacity=80)';
div.style.opacity = '.80';
div.style.zIndex = 100001;
div.style.left = 0;
div.style.top = 0;
div.style.width = w+'px';
div.style.height= h+'px';
document.body.appendChild(div);
}

if(!$('divDaoHangBgIframe'))
{
var iframe;
iframe = this.$C('IFRAME');//創建蒙板內的內嵌iframe容器,用於嵌入顯示其他網頁
iframe.id = 'divDaoHangBgIframe';
iframe.frameBorder = '0';
iframe.scrolling = "no";
iframe.style.overflow = 'hidden';
iframe.allowTransparency = 'true';
iframe.style.display = 'none';
iframe.style.width = w+'px';//800
iframe.style.height = h+'px';//620
iframe.style.marginTop = '75px';//800
$('divDaoHangBg').appendChild(iframe);
}
if(!$('divDaoHangBgClose'))
{
var div = $C('div');//創建關閉按鈕在蒙板上
div.id = 'divDaoHangBgClose';
div.style.position = 'absolute';
div.style.backgroundImage='url(images/closb.gif)';
div.style.zIndex = 100003;
div.style.right = 10;
div.style.top = 20;
div.style.width = '82px';
div.style.height= '30px';
div.title='關閉';
div.style.cursor='hand';
div.onclick=function(){//點擊時間 ,關閉蒙板
fnDaoHangBgClose();
};
$('divDaoHangBg').appendChild(div);
}
$('divDaoHangBgIframe').style.display='block';
$('divDaoHangBg').style.display='block';
}
//關閉蒙板
function fnDaoHangBgClose()
{
if(!$('divDaoHangBg')){return;}
if(!$('divDaoHangBgIframe')){return;}
$('divDaoHangBgIframe').src='';
$('divDaoHangBgIframe').style.display='none';
$('divDaoHangBg').style.display='none';
}
//調用,內嵌url
function fnDaoHangBgShow(url)
{
fnDaoHangBg();
$('divDaoHangBgIframe').src=url;
}

其中 $()和$C()分別表示
$(id),獲取該id的對象,document.getElementById(id)
$C(tag),創建一個標簽, document.createElement(tag);
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved