1.描述
百度登錄就是一個模態框彈出層。思路分析：先將灰色大背景和登陸盒子設為不可見，利用JS將其動態加載可見。
2、代碼
<!DOCTYPE html> <html> <head> <title>模態框彈出層.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style> *{margin:0;padding:0;} body{ width:100%; height:10000000px; } #mask{ display:none; background:rgba(0,0,0,0.3); width:100%; height:100%; position:fixed;//利用固定定位的好處：頁面還可以上下翻動，但是始終處於灰色背景下 } #login{ display:none; background:white; width:400px; height:250px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-125px; } #login #close_login{ position:absolute; left:350px; top:10px; font-size:20px; width:20px; height:20px; background:skyblue; cursor:pointer; } </style> <script type="text/javascript"> window.onload=function(){ var btn=document.getElementById("btn"); var mask=document.getElementById("mask"); var login=document.getElementById("login"); btn.onclick=function(){ mask.style.display="block"; login.style.display="block"; }; var close_login=document.getElementById("close_login"); close_login.onclick=function(){ mask.style.display="none"; login.style.display="none"; }; }; </script> </head> <body> <div id="mask"></div> <div id="login"> <span id="close_login">×</span> </div> <a href="javascript:;" id="btn">請登錄</a> </body> </html>