課程
/前端開發(fā)
/JavaScript
/彈出層效果
為什么視頻的代碼跟下載的代碼不一樣呢?
2015-03-30
源自:彈出層效果 3-3
正在回答
function?openNew(){ //獲取頁面的高度和寬度 var?sWidth=document.body.scrollWidth; var?sHeight=document.body.scrollHeight; //獲取頁面的可視區(qū)域高度和寬度 var?wHeight=document.documentElement.clientHeight; var?oMask=document.createElement("div"); oMask.id="mask"; oMask.style.height=sHeight+"px"; oMask.style.width=sWidth+"px"; document.body.appendChild(oMask); var?oLogin=document.createElement("div"); oLogin.id="login"; oLogin.innerHTML="<div?class='loginCon'><div?id='close'>點擊關閉</div></div>"; document.body.appendChild(oLogin); //獲取登陸框的寬和高 var?dHeight=oLogin.offsetHeight; var?dWidth=oLogin.offsetWidth; //設置登陸框的left和top oLogin.style.left=sWidth/2-dWidth/2+"px"; oLogin.style.top=wHeight/2-dHeight/2+"px"; //點擊關閉按鈕 var?oClose=document.getElementById("close"); //點擊登陸框以外的區(qū)域也可以關閉登陸框 oClose.onclick=oMask.onclick=function(){ document.body.removeChild(oLogin); document.body.removeChild(oMask); }; }; window.onload=function(){ var?oBtn=document.getElementById("btnLogin"); //點擊登錄按鈕 oBtn.onclick=function(){ openNew(); return?false; } }
基本上都是一致的?。?!
舉報
通過本課程的學習讓您能靈活運用知識,制作出超炫的彈出層效果
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關注慕課網(wǎng)微信公眾號
2015-12-28
基本上都是一致的?。?!