jQuery实现的AJAX简单弹出层效果代码

前端技术 2023/09/03 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/8073

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案