本文實例講述了jQuery實現的AJAX簡單彈出層效果。分享給大家供大家參考，具體如下：
運行效果截圖如下：
具體代碼如下：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <script type="text/javascript" src="jquery1.3.2.js"></script> <style type="text/css"> <!-- html, body { height: 100%; margin: 0px; font-size: 12px; } .mydiv { background-color: #FFCC66; border: 1px solid #f00; text-align: center; line-height: 40px; font-size: 12px; font-weight: bold; z-index: 99; width: 300px; height: 120px; left: 50%; /*FF IE7*/ top: 50%; /*FF IE7*/ margin-left: -150px !important; /*FF IE7 該值為本身寬的一半 */ margin-top: -60px !important; /*FF IE7 該值為本身高的一半*/ margin-top: 0px; position: fixed !important; /*FF IE7*/ position: absolute; /*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/ } .mydiv2 { background-color: #FFCC66; border: 1px solid #f00; text-align: center; line-height: 40px; font-size: 12px; font-weight: bold; z-index: 99; width: 400px; height: 400px; left: 50%; /*FF IE7*/ top: 50%; /*FF IE7*/ margin-left: -200px !important; /*FF IE7 該值為本身寬的一半 */ margin-top: -200px !important; /*FF IE7 該值為本身高的一半*/ margin-top: 0px; position: fixed !important; /*FF IE7*/ position: absolute; /*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/ } .bg { background-color: #666; width: 100%; height: 100%; left: 0; top: 0; /*FF IE7*/ filter: alpha(opacity=50); /*IE*/ opacity: 0.5; /*FF*/ z-index: 1; position: fixed !important; /*FF IE7*/ position: absolute; /*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/ } -- ></style> <script language="javascript" type="text/javascript"> function showDiv() { $('#popDiv').removeClass().addClass("mydiv").css("display","block").css("background","ff9"); $('#bg').css("display","block"); } function showDiv2() { $('#popDiv').removeClass().addClass("mydiv2").css("display","block").css("background","pink"); $('#bg').css("display","block"); } function closeDiv() { $('#popDiv').css("display","none"); $('#bg').css("display","none"); } </script></head><body onload="$('#bg').css('height',document.body.clientHeight).css('width',document.body.clientWidth); "> <div id="popDiv" class="mydiv" style="display: none;"> 動態彈出的層<br /> 動態彈層的內容<br /> <a href="javascript:closeDiv()">關閉窗口</a></div> <div id="bg" class="bg" style="display: none;"> </div> <div style="height: 1400px;"> <div style="text-align: center;"> <a href="javascript:showDiv()">點我1</a><br/><br/> <a href="javascript:showDiv2()">點我2</a> </div> </div></body></html>希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
