Rumah  >  Artikel  >  hujung hadapan web  >  AJAX kod kesan lapisan pop timbul mudah dilaksanakan oleh jQuery_jquery

AJAX kod kesan lapisan pop timbul mudah dilaksanakan oleh jQuery_jquery

WBOY
WBOYasal
2016-05-16 15:29:371100semak imbas

Contoh dalam artikel ini menerangkan kesan lapisan pop timbul AJAX yang mudah dilaksanakan oleh jQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut: 

<!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') &#63;
   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') &#63;
   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') &#63;
   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>

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Pelajari corak reka bentuk JavaScript (panggilan berantai)_kemahiran javascriptArtikel seterusnya：Pelajari corak reka bentuk JavaScript (panggilan berantai)_kemahiran javascript

Artikel berkaitan

Lihat lagi