js遮罩層代碼（js 遮罩層）

本文目錄一覽：

• 1、js彈出div並顯示遮罩層
• 2、js代碼定時關閉遮罩層，小白求教Javascript代碼
• 3、js彈出的遮罩層，如何能遮住全屏？

js彈出div並顯示遮罩層

彈出div顯示遮罩層的效果，想必大家都有見到過吧，下面有個示例，大家可以參考下

代碼如下:

//——————–彈出層——————-

//popDivId:彈出層div的ID

//dragDivId:用於拖動div的ID

//isShowMask:是否顯示遮罩層

function

popDivShow(popDivId,

dragDivId,

isShowMask)

{

if

(isShowMask)

{

creatMask(popDivId);

}

var

oWins

=

document.getElementById(popDivId);

var

oWins_title

=

document.getElementById(dragDivId);

var

bDrag

=

false;

var

disX

=

disY

=

0;

oWins.style.display

=

“block”;

oWins_title.onmousedown

=

function(event)

{

var

event

=

event

||

window.event;

bDrag

=

true;

disX

=

event.clientX

–

oWins.offsetLeft;

disY

=

event.clientY

–

oWins.offsetTop;

this.setCapture

this.setCapture();

return

false;

};

document.onmousemove

=

function(event)

{

if

(!bDrag)

return;

var

event

=

event

||

window.event;

var

iL

=

event.clientX

–

disX;

var

iT

=

event.clientY

–

disY;

var

maxL

=

document.documentElement.clientWidth

–

oWins.offsetWidth;

var

maxT

=

document.documentElement.clientHeight

–

oWins.offsetHeight;

iL

=

iL

?

:

iL;

iL

=

iL

maxL

?

maxL

:

iL;

iT

=

iT

?

:

iT;

iT

=

iT

maxT

?

maxT

:

iT;

oWins.style.marginTop

=

oWins.style.marginLeft

=

0;

oWins.style.left

=

iL

+

“px”;

oWins.style.top

=

iT

+

“px”;

return

false;

};

document.onmouseup

=

window.onblur

=

oWins_title.onlosecapture

=

function()

{

bDrag

=

false;

oWins_title.releaseCapture

oWins_title.releaseCapture();

};

}

//

隱藏彈出層

function

popDivHidden(popDivId)

{

var

oWins

=

document.getElementById(popDivId);

oWins.style.display

=

“none”;

window.parent.document.body.removeChild(window.parent.document.getElementById(“maskDiv”));

}

//

獲取彈出層的zIndex

function

getZindex(popDivId)

{

var

popDiv

=

document.getElementById(popDivId);

var

popDivZindex

=

popDiv.style.zIndex;

return

popDivZindex;

}

//

創建遮罩層

function

creatMask(popDivId)

{

//

參數w為彈出頁面的寬度,參數h為彈出頁面的高度,參數s為彈出頁面的路徑

var

maskDiv

=

window.parent.document.createElement(“div”);

maskDiv.id

=

“maskDiv”;

maskDiv.style.position

=

“fixed”;

maskDiv.style.top

=

“0”;

maskDiv.style.left

=

“0”;

maskDiv.style.zIndex

=

getZindex(popDivId)

–

1;

maskDiv.style.backgroundColor

=

“#333”;

maskDiv.style.filter

=

“alpha(opacity=70)”;

maskDiv.style.opacity

=

“0.7”;

maskDiv.style.width

=

“100%”;

maskDiv.style.height

=

(window.parent.document.body.scrollHeight

+

50)

+

“px”;

window.parent.document.body.appendChild(maskDiv);

maskDiv.onmousedown

=

function()

{

window.parent.document.body.removeChild(window.parent.document.getElementById(“maskDiv”));

};

}

js代碼定時關閉遮罩層，小白求教Javascript代碼

這是一個打開網頁 30秒後自動彈出紅色的遮罩層，5秒後遮罩層自動關閉。

html

    body onload=”load()”

    div id=”zzDiv” style=”width:100%;height:100%;opacity:0.5;background-color:#ccc;display:none;position: fixed;z-index:9999;”遮罩層/div

    ndndndndnddnnd

    script type=”text/javascript”

    function load(){

         setTimeout(showDiv,3000);

}

function showDiv(){

    document.getElementById(“zzDiv”).style.display=”block”;

    setTimeout(hideDiv,5000);

}

function hideDiv(){

   document.getElementById(“zzDiv”).style.display=”none”;

}

/script

/body

/html

關於移植：在你想要彈出遮罩層的頁面修改。按照頁面結構把對應標籤的內容複製到你要修改的頁面中。例如body/body的內容複製到body/body裡面。再將 body 改成body onload=”load()”。

js彈出的遮罩層，如何能遮住全屏？

只需5個步驟就可以解決遮住全屏的問題。

1．打開UE編輯器，創建一個空白的HTML源文件和CSS源文件，如下圖。

2．在個HTML文件中輸入下列HTML代碼，如下圖參考。

3．在CSS文件中輸入以下CSS代碼，如下圖。

4．編輯完成後，選擇UTF8－noBOM模式保存文件，如下圖。

5．在瀏覽器中打開HTML文件，您可以看到最終想要實現的遮住全屏效果，如下圖。