var popupStatus = 0; //loading popup with jQuery magic! function loadPopup(){ //loads popup only if it is disabled if(popupStatus==0){ $("#backgroundPopup").css({ "opacity": "0.7" }); $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; } } //disabling popup with jQuery magic! function disablePopup(){ //disables popup only if it is enabled if(popupStatus==1){ $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; } } //centering popup function centerPopup(){ //request data for centering var browser=navigator.userAgent; var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var stop=""; var sleft=""; if(browser.indexOf('Chrome')!=-1){ stop=document.body.scrollTop; sleft=document.body.scrollLeft; } else{ stop=document.documentElement.scrollTop; sleft=document.documentElement.scrollLeft; } // windowWidth+=document.body.scrollLeft; // windowHeight+=document.body.scrollTop; var popupHeight = $("#popupContact").height(); var popupWidth = $("#popupContact").width(); //centering $("#popupContact").css({ "position": "absolute", "top": windowHeight/2-popupHeight/2+stop, "left": windowWidth/2-popupWidth/2+sleft }); //only need force for IE6 //背景色 $("#backgroundPopup").css({ "height": windowHeight }); } //调用弹出框事件 function bb(str){ $("#download").show(); centerPopup(); loadPopup(); //CLOSING POPUP //Click the x event! $("#popupContactClose").click(function(){ disablePopup(); }); //Click out event!，点击背景事件 $("#backgroundPopup").click(function(){ disablePopup(); }); //Press Escape event! $(document).keypress(function(e){ if(e.keyCode==27 && popupStatus==1){ disablePopup(); } }); }

<div id="download" style="display: none;"> <div id="popupContact"> <!--自己的 HTML（body中）--> </div> <div id="backgroundPopup"></div> </div> </div>