说明：代码来自网络。注释为笔者学习时添加。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出层效果</title> <style> html,body{ height:100%; overflow:hidden; } body,div,h2{ /*内外边距归零*/ margin:0; padding:0; } body{ font:12px/1.5 Tahoma;/*字号行高字体*/ } center{ padding-top:10px; } button{ cursor:pointer; } #overlay{ position:absolute;/*绝对定位*/ top:0; /*居于左上角*/ left:0; width:100%; height:100%; background:#000; /*背景黑色*/ opacity:0.5;/*半透明*/ filter:alpha(opacity=50); display:none;/*默认不显示*/ } #win{ /*弹出的窗口*/ position:absolute; /*绝对定位*/ top:50%;/*上下左右居中*/ left:50%; width:400px; height:200px; background:#fff;/*背景白色*/ border:4px solid #f90; margin:-102px 0 0 -202px; display:none; /*默认隐藏*/ } h2{ font-size:12px; text-align:right; background:#fc0;/*黄色*/ border-bottom:3px solid #f90;/*深黄色*/ padding:5px; } h2 span{ color:#f90; cursor:pointer;/*手形*/ background:#fff;/*白色*/ border:1px solid #f90; padding:0 2px; } </style> <script> window.onload = function () { var oWin = document.getElementById("win"); //获取win元素引用 var oLay = document.getElementById("overlay");//获取overlay元素引用 var oBtn = document.getElementsByTagName("button")[0];//获取button集合中的第一个按钮引用 var oClose = document.getElementById("close");//获取span元素的引用 oBtn.onclick = function () { //注册button的click事件，设置display值为block，显示 oLay.style.display = "block"; oWin.style.display = "block"; }; oClose.onclick = function () {//注册关闭按钮的click事件，设置display值为none隐藏 oLay.style.display = "none"; oWin.style.display = "none"; } } </script> </head> <body> <div id="overlay"></div> <!--遮罩层，显示时整个页面显示为灰色--> <div id="win"><h2><span id="close">x</span></h2></div> <center><button>弹出层</button></center><!--按钮，center元素已废弃--> </body> </html>