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>