本文实例讲述了jQuery实现的AJAX简单弹出层效果。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://pat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); } -- ></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程序设计有所帮助。