jquery实现弹出层效果实例

本文实例讲述了jquery实现弹出层效果的方法。分享给大家供大家参考。具体实现方法如下：

<head runat="server"><title>jQuery弹出层</title><script type="text/javascript" src="js/jquery-1.3.2-min.js"></script><script type="text/javascript"> $（function（） {$（"#btnShow"）.click（function（） {// var str = "我是弹出对话框";// $（".form"）.html（str）;$（"#BgDiv"）.css（{ display: "block", height: $（document）.height（）}）;var yscroll = document.documentElement.scrollTop;$（"#DialogDiv"）.css（"top", "100px"）;$（"#DialogDiv"）.css（"display", "block"）;document.documentElement.scrollTop = 0;}）;$（"#btnClose"）.click（function（） {$（"#BgDiv"）.css（"display", "none"）;$（"#DialogDiv"）.css（"display", "none"）;}）; }）;</script><style type="text/css"> body, h2 {margin: 0;padding: 0; } #BgDiv {background-color: #e3e3e3;position: absolute;z-index: 99;left: 0;top: 0;display: none;width: 100%;height: 1000px;opacity: 0.5;filter: alpha（opacity=50）;-moz-opacity: 0.5; } #DialogDiv {position: absolute;width: 400px;left: 50%;top: 50%;margin-left: -200px;height: auto;z-index: 100;background-color: #fff;border: 1px #8FA4F5 solid;padding: 1px; } #DialogDiv h2 {height: 25px;font-size: 14px;background-color: #8FA4F5;position: relative;padding-left: 10px;line-height: 25px; } #DialogDiv h2 a {position: absolute;right: 5px;font-size: 12px;color: #000000; } #DialogDiv .form {padding: 10px; } </style></head><body> <form id="form1" runat="server"> <div id="BgDiv"></div> <div id="DialogDiv" style="display: none"> <h2>弹出层<a href="#" id="btnClose">关闭</a></h2> <div class="form">我是弹出对话框！！<br />我是弹出对话框！！<br />我是弹出对话框！！<br />我是弹出对话框！！<br />我是弹出对话框！！<br />我是弹出对话框！！<br />我是弹出对话框！！<br /> </div> </div> <p>  </p> <p align="center"> <input value="弹出" class="but" type="button" id="btnShow" /> </p> </form></body></html>

希望本文所述对大家的jQuery程序设计有所帮助。