新人第一次發(fā)帖，可喜歡可評論可轉(zhuǎn)載
先來說一說獲取頁面高度寬度的問題
var sheight = document.documenElement.scrollHeight; //獲取頁面的高度
var swidth = document.documentElelment.scrollWidth; //獲取頁面的寬度
var cheight = document.documentElement.clientHeight; //獲取頁面可視區(qū)域的高度
var cwidth= document.documentElement.clientWidth; //獲取頁面可視區(qū)域的高度
頁面高度指的是整個網(wǎng)頁高度，就是在頂部到底部的長度
頁面可是區(qū)域的高度指的是我們能看到的長度，如果你不改變?yōu)g覽器的窗口大小和分辨率的大小，這個值一般是不會改變的。
頁面的寬度就沒什么好說的了，因為通常情況下 swidth = cwidth 。很少有網(wǎng)頁能夠左右拉動的。
然后在來說一說彈出層，這個看起來高大上實際上非常簡單非常基礎(chǔ)的東西，我學(xué)習(xí)的時候真的是淚流滿面，曾經(jīng)覺得這怎么這么難，看了原理之后這的是欲哭無淚。好吧，我是小白。
先來看看如果要做出彈出層需要知道的東西：
CSS:
position:fixed;
z-index:---;
opacity:0.5;//遮罩層層透明度
filter:alpha(opacity=50);//兼容IE
position:absolute;//絕對定位
Js：
var div = document.create('div');//創(chuàng)建節(jié)點
document.body.appendChild(div);//插入節(jié)點
說一說彈出層的原理，點擊一個按鈕時觸發(fā)一個事件，這個事件新建了兩個DOM節(jié)點，一個是遮罩層，一個是彈出框。通過設(shè)置遮罩層的透明度來實現(xiàn)背景變黑，將遮罩層的 z-index設(shè)置為100(比頁面中其他元素的z-index)大就可以，彈出框的z-index設(shè)置為101(比遮罩層大)。通過點擊遮罩層或者關(guān)閉按鈕刪除剛剛創(chuàng)建的節(jié)點。
最后,按照習(xí)俗該上代碼了...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彈出層</title>
</head>
<style>
#close{ //關(guān)閉按鈕
background:url(http://img.mukewang.com/532c272100018d1600300030.jpg) no-repeat;
width:30px;
height:30px;
cursor:pointer;
position:absolute;
right:5px;
top:15px;
text-indent:-999em;
}
#login{ //彈出框
position:fixed;
z-index:1001;
}
.loginCon{
position:relative;
width:670px;
height:380px;
background:url(http://img.mukewang.com/532c26ee0001ded006700380.jpg) #2A2C2E center center no-repeat;
}
#Misk{//彈出層
position: absolute;
top:0px;
left:0px;
background-color: #000;
z-index: 1000;
opacity:0.5;
filter:alpha(opacity=50);//兼容IE
}
</style>
<body>
<input id='Btn' type="button" value='打開彈出層' />
<script>
var btn = document.getElementById('Btn');
btn.onclick=function () {
//獲取頁面的高度和寬度
var sHeight = document.documentElement.scrollHeight;
var sWidth = document.documentElement.scrollWidth;
//獲取頁面的可視區(qū)域高度和寬度
var wHeight=document.documentElement.clientHeight;
var wWidth=document.documentElement.clientWidth;
var oLogin=document.createElement("div");
oLogin.id="login";
oLogin.innerHTML="<div class='loginCon'><div id='close'>點擊關(guān)閉</div></div>";
//插入創(chuàng)建的登陸框
document.body.appendChild(oLogin);
//獲取登陸框的寬和高
var dHeight = 400; // 獲取登陸框的高度
var dWidth = 800; // 獲取登陸框的寬度
//設(shè)置登陸框的left和top
oLogin.style.left=wWidth/2-dWidth/2+"px";
oLogin.style.top=wHeight/2-dHeight/2+'px'; //設(shè)置登陸框top值
var oMisk = document.createElement('div');
oMisk.id='Misk';
oMisk.style.height=wHeight+'px';
oMisk.style.width=wWidth+'px';
document.body.appendChild(oMisk);
var oClose=document.getElementById("close");
//點擊登陸框以外的區(qū)域也可以關(guān)閉登陸框
oMisk.onclick=oClose.onclick=function()
{
document.body.removeChild(oLogin);
document.body.removeChild(oMisk);
}
}
</script>
</body>
</html>
課程來自慕課網(wǎng)，后續(xù)會有更多類似特效，基本每天一個。
