-
document.creanteElement 創建節點 doucument.body.appendChild()放置節點查看全部
-
document.documentElement.scrollHeight 獲取當前網頁的實際高度 .scrollwidth 獲取當前網頁的實際寬度查看全部
-
彈出層工作原理：創建或者刪除兩個節點（一個是遮罩層，一個是登錄層）查看全部
-
window.onload的意義是文檔頁面加載完獲取節點，有些節點在文檔沒加載完獲取不到，會出現報錯 var sHeight=document.documentElement.scrollHeight;獲取頁面高度 var sWidth=document.documentElement.scrollWidth;獲取頁面寬度 var oMask=document.createElement("div");創建節點 document.body.appendChild(oMask);在頁面上追加節點（顯示） window.onload=function(){ var oBtn=document.getElementById("btnLogin"); //獲取變量 //獲取頁面的高度和寬度 var sHeight=document.documentElement.scrollHeight; var sWidth=document.documentElement.scrollWidth; //重新創建一個節點 var oMask=document.createElement("div"); oMask.id="mask"; //設置高度與獲取到的高度和寬度一樣的值 oMask.style.height=sHeight+"px"; oMask.style.width=sWidth+"px"; // 追截節點 類似插入文檔 document.body.appendChild(oMask); }查看全部
-
1、彈出層效果 要創建一個彈出層，可以現在CSS樣式表里把這個彈出層的#id和樣式設好， 然后在JS里創建這個彈出層 2、要實現點擊登陸框以外的區域也可以關閉登陸框 可以設一個可視區大小的遮罩層oMask，opacity設為0 oMask.onclick=oClose.onclick=function(){ }查看全部
-
登錄框相對窗口垂直水平居中不用js控制,用css就能實現，如登錄框 .login-box{ width:500px; height:600px; position:fixed; top:50%; left:50%; margin-top:-300px;(自身高度的一半) margin-left:-250px;(自身寬度的一半)}查看全部
-
父子關系查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>慕課網-彈出層</title> <style type="text/css"> #close{ background:url(http://img1.sycdn.imooc.com//532c272100018d1600300030.jpg) no-repeat; width:30px; height:30px; cursor:pointer; position:absolute; right:5px; top:15px; text-indent:-999em; } #mask{ background-color:#ccc; opacity:0.5; filter: alpha(opacity=50); position:absolute; left:0; top:0; z-index:1000; } #login{ position:fixed; z-index:1001; } .loginCon{查看全部
-
<!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>慕課網-彈出層</title> <style type="text/css"> #close{ background:url(http://img1.sycdn.imooc.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://img1.sycdn.imooc.com//532c26ee0001ded006700380.jpg) #2A2C2E center center no-repeat; } </style> <link type="text/css" rel="stylesheet" href="style/main.css" /> <script> function openNew(){ //獲取頁面的高度和寬度 var sWidth=document.documentElement.scrollWidth; var sHeight= document.documentElement.scrollHeight ; //獲取頁面的高度 //獲取頁面的可視區域高度和寬度 var wHeight=document.documentElement.clientHeight ; // 獲取頁面可視區域的高度查看全部
-
獲取頁面的高度和寬度，不是可視窗口的高度和寬度額查看全部
-
靜止定位：position:fixed;查看全部
-
z-index:1000px;給一個大的層級讓懸浮層處在最上以便于遮住所有元素。查看全部
-
透明度：opacity:0.75; IE兼容 filter:alphal(opacity=75);查看全部
-
絕對定位：position:absolute;left:0;top:0;查看全部
-
透明度的兼容：opacity：0-1之間的數字；ie兼容用濾鏡filter：alpha（opacity：1——100之間的整數）查看全部
舉報
0/150
提交
取消