时间:2021-07-01 10:21:17 帮助过:15人阅读
本文实例讲述了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; } .myp { 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*/ } .myp2 { 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 showp() { $('#popp').removeClass().addClass("myp").css("display","block").css("background","ff9"); $('#bg').css("display","block"); } function showp2() { $('#popp').removeClass().addClass("myp2").css("display","block").css("background","pink"); $('#bg').css("display","block"); } function closep() { $('#popp').css("display","none"); $('#bg').css("display","none"); } </script> </head> <body onload="$('#bg').css('height',document.body.clientHeight).css('width',document.body.clientWidth); "> <p id="popp" class="myp" style="display: none;"> 动态弹出的层<br /> 动态弹层的内容<br /> <a href="javascript:closep()">关闭窗口</a></p> <p id="bg" class="bg" style="display: none;"> </p> <p style="height: 1400px;"> <p style="text-align: center;"> <a href="javascript:showp()">点我1</a><br/><br/> <a href="javascript:showp2()">点我2</a> </p> </p> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
关于Ajax上传图片的介绍
ajax实现输入框文字改变展示下拉列表的效果
jquery实现图片水平滚动的效果
以上就是jQuery实现的AJAX简单弹出层效果的详细内容,更多请关注Gxl网其它相关文章!