原生js實作半透明遮罩層效果具體程式碼_javascript技巧

渡//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


>


* {
邊距：0;
填充：0;
字體大小：12px;
}
html, body {
高度： 100%;
寬度：100%;
}
#內容{
背景：#FFFFFF;
內邊距：30px;
高度：100%；
}
#content a {
字體大小：30px;
顏色：#369;
字體粗細：700;
}
#alert { z-index:2;
邊框：1px實心#369;
寬度：300px；
高度：150px;
背景：#e2ecf5;
z 索引：1000；
位置：絕對；
z 索引：1000;
位置：絕對；
z 索引：1000；
位置：絕對；
索引：1000；
位置：絕對；
索引：1000； ;
}
#alert h4 {
高度：20px;
背景：#369;
顏色：#fff;
內邊距：5px 0 0 5px；
}
#alert h4 span {
浮動：左；
}
#alert h4 span#close {
margin-left: 210px;
字體粗細：500；
；遊標：指針；
}
#alert p {
填充：12px 0 0 30px;
}
#alert p 輸入{
寬度：120px
#alert p 輸入{
寬度：120px;
# 20px;
}
#alert p input.myinp {
邊框：1px 實心#ccc;
高度：16px;
}
sub {#alert input.sub {
寬度：60px;
左邊距：30px；
}
#mask{ 位置：絕對；上：0；左：0；高度：100%；寬度：100%；背景：#000；不透明度：0.3;顯示：無; z-index:1;}
;
頭>





var myAlert = document.getElementById("alert ");
var myMask=document.getElementById('mask');
var reg = document.getElementById("content").getElementsByTagName("a")[0];
var mClose = document .getElementById("close");
reg.onclick = function()
{
myMask.style.display="block";
myAlert.style.display = "block"; myAlert.style.display = "block";
myAlert.style.position = "絕對";
myAlert.style.top = "50%";
myAlert.style.left = "50%";
myAlert.style.marginTop = "- 75px";
myAlert.style.marginLeft = "-150px";
document.body.style.overflow = "隱藏";
}