<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="css_js/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> // JavaScript Document var popupStatus = 0; function loadPopup() { if(popupStatus == 0) { $("#backgroundPopup").css({ "opacity":"0.3" }); $("#popupContact").fadeIn("slow"); $("#backgroundPopup").fadeIn("slow"); popupStatus = 1; } } function disablePopup() { if(popupStatus == 1) { $("#popupContact").fadeOut("slow"); $("#backgroundPopup").fadeOut("slow"); popupStatus = 0; } } function centerPopup() { var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupWidth = $("#popupContact").width(); var popupHeight = $("#popupContact").height(); $("#popupContact").css({ "position":"absolute", "top": windowHeight/2 - popupHeight/2, "left":windowWidth/2 - popupWidth/2 }); } $(document).ready(function(){ $("#button").click(function(){ centerPopup(); loadPopup(); }); $("#popupContactClose").click(function(){ disablePopup(); }); }); </script> <style type="text/css"> #popupContact{ display:none; position:fixed; height:384px; width:408px; _position:absolute; background-color:#ffffff; border:2px solid #cecece; z-index:2; padding:12px; font-size:12px; } #popupContact h1{ color:#6fa5fd; text-align:left; font-size:22px; font-weight:700; border-bottom:1px dotted #d3d3d3; padding-bottom:2px; margin-bottom:20px; } #button{ margin:100px; text-align:center; } #popupContactClose{ font-size:14px; line-height:14px; color:#6fa5fd; font-weight:700; position:absolute; cursor:pointer; top:4px; right:6px; } #backgroundPopup{ display:none; position:fixed; _position:absolute; width:100%; height:100%; left:0; top:0; background-color:#000000; border:1px; solid; #cecece; z-index:1; } </style> </head> <body> <center> <div id="button"><input type="button" value="点击查看效果" /></div> </center> <div id="popupContact"> <a id="popupContactClose">x</a> <h1>标题</h1> <p id="contactArea">这里是正文</p> </div> <div id="backgroundPopup"></div> </body> </html>
相关资源：（美观 实用）jQuery点击弹出步骤遮罩层窗口代码
