<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #login { display:none; border:1em solid #3366FF; height:30%; width:50%; position:absolute;/*讓節點脫離文檔流,我的理解就是,從頁面上浮出來,不再按照文檔其它內容布局*/ top:24%;/*節點脫離了文檔流,如果設置位置需要用top和left,right,bottom定位*/ left:24%; z-index:2;/*個人理解為層級關系,由於這個節點要在頂部顯示,所以這個值比其余節點的都大*/ background: white; } #over { width: 100%; height: 100%; opacity:0.8;/*設置背景色透明度,1為完全不透明,IE需要使用filter:alpha(opacity=80);*/ filter:alpha(opacity=80); display: none; position:absolute; top:0; left:0; z-index:1; background: silver; } </style> </head> <body> <a href="javascript:show()">彈出</a> <div id="login"> <a href="javascript:hide()">關閉</a> <div>這里是關閉彈窗的內容</div> </div> <div id="over"></div> </body> </html> <script type="text/javascript"> function show() { var login = document.getElementById('login'); var over = document.getElementById('over'); login.style.display = "block"; over.style.display = "block"; } function hide() { var login = document.getElementById('login'); var over = document.getElementById('over'); login.style.display = "none"; over.style.display = "none"; } </script>