jQuery實(shí)現(xiàn)的AJAX簡單彈出層效果代碼
本文實(shí)例講述了jQuery實(shí)現(xiàn)的AJAX簡單彈出層效果。分享給大家供大家參考,具體如下:
運(yùn)行效果截圖如下:
具體代碼如下:
<!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>無標(biāo)題文檔</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;"> 動(dòng)態(tài)彈出的層<br /> 動(dòng)態(tài)彈層的內(nèi)容<br /> <a href="javascript:closeDiv()">關(guān)閉窗口</a></div> <div id="bg" class="bg" style="display: none;"> </div> <div style="height: 1400px;"> <div style="text-align: center;"> <a href="javascript:showDiv()">點(diǎn)我1</a><br/><br/> <a href="javascript:showDiv2()">點(diǎn)我2</a> </div> </div> </body> </html>
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)form表單基于ajax無刷新提交方法詳解
- JavaScript原生xmlHttp與jquery的ajax方法json數(shù)據(jù)格式實(shí)例
- jQuery使用$.ajax進(jìn)行異步刷新的方法(附demo下載)
- jQuery實(shí)現(xiàn)ajax調(diào)用WCF服務(wù)的方法(附帶demo下載)
- jQuery學(xué)習(xí)筆記之Ajax用法實(shí)例詳解
- Jquery操作Ajax方法小結(jié)
- 談?wù)刯Query Ajax用法詳解
- jQuery使用$.ajax進(jìn)行即時(shí)驗(yàn)證的方法
相關(guān)文章
jquery處理頁面彈出層查詢數(shù)據(jù)等待操作實(shí)例
這篇文章主要介紹了jquery處理頁面彈出層查詢數(shù)據(jù)等待操作,實(shí)例分析了jquery實(shí)現(xiàn)等待效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jquery(javascript)自動(dòng)序列編號(hào)和屬性編號(hào)實(shí)現(xiàn)代碼
jquery(javascript)自動(dòng)序列編號(hào)和屬性編號(hào)實(shí)現(xiàn)代碼,需要的朋友可以參考下2012-07-07jquery select插件異步實(shí)時(shí)搜索實(shí)例代碼
這篇文章主要介紹了jquery select插件異步實(shí)時(shí)搜索實(shí)例代碼,需要的朋友可以參考下2017-10-10jQuery 快速結(jié)束當(dāng)前正在執(zhí)行的動(dòng)畫
要快速結(jié)束一個(gè)當(dāng)前正在執(zhí)行的jquery 動(dòng)畫時(shí)可以在執(zhí)行當(dāng)前動(dòng)畫的對(duì)象上執(zhí)行 stop(true)方法,下面有個(gè)不錯(cuò)的示例感興趣的朋友不要錯(cuò)過2013-11-11jQuery的時(shí)間datetime控件在AngularJs中的使用實(shí)例(分享)
下面小編就為大家?guī)硪黄猨Query的時(shí)間datetime控件在AngularJs中的使用實(shí)例(分享)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08