欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實現(xiàn)的AJAX簡單彈出層效果代碼

 更新時間:2015年11月26日 15:53:34   作者:Jimmy.Yang  
這篇文章主要介紹了jQuery實現(xiàn)的AJAX簡單彈出層效果代碼,涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素實現(xiàn)彈出層效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)的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>無標(biāo)題文檔</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;">
  動態(tài)彈出的層<br />
  動態(tài)彈層的內(nèi)容<br />
  <a href="javascript:closeDiv()">關(guān)閉窗口</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程序設(shè)計有所幫助。

相關(guān)文章

  • UpdatePanel和Jquery沖突的解決方法

    UpdatePanel和Jquery沖突的解決方法

    在第一次頁面加載時,元素A的X效果正常,點擊B之后,頁面局部刷新,此時,回到A,元素A失去X效果.后來了解了下頁面應(yīng)用了ASP.NET AJAX局部刷新,這就明朗了,估計是和JQUERY沖突了
    2013-04-04
  • 基于jquery的回到頁面頂部按鈕

    基于jquery的回到頁面頂部按鈕

    昨天看到一個園友的blog中有個頁面下滾后出現(xiàn)用于"回到頁面頂部"按鈕的效果, 感覺挺不錯的, 所以自己也寫了一個, 用jQuery寫是再簡單不過了. 下面就直接給出代碼了
    2011-06-06
  • jquery處理頁面彈出層查詢數(shù)據(jù)等待操作實例

    jquery處理頁面彈出層查詢數(shù)據(jù)等待操作實例

    這篇文章主要介紹了jquery處理頁面彈出層查詢數(shù)據(jù)等待操作,實例分析了jquery實現(xiàn)等待效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • jquery(javascript)自動序列編號和屬性編號實現(xiàn)代碼

    jquery(javascript)自動序列編號和屬性編號實現(xiàn)代碼

    jquery(javascript)自動序列編號和屬性編號實現(xiàn)代碼,需要的朋友可以參考下
    2012-07-07
  • jquery滾動特效集錦

    jquery滾動特效集錦

    本文給大家匯總介紹的是jquery單行滾動、批量多行滾動、文字圖片翻屏滾動效果代碼,都是分廠常用的一些文字以及圖文的無縫滾動特效,希望能夠?qū)Υ蠹沂煜Query有所幫助。
    2015-06-06
  • jquery select插件異步實時搜索實例代碼

    jquery select插件異步實時搜索實例代碼

    這篇文章主要介紹了jquery select插件異步實時搜索實例代碼,需要的朋友可以參考下
    2017-10-10
  • jQuery 快速結(jié)束當(dāng)前正在執(zhí)行的動畫

    jQuery 快速結(jié)束當(dāng)前正在執(zhí)行的動畫

    要快速結(jié)束一個當(dāng)前正在執(zhí)行的jquery 動畫時可以在執(zhí)行當(dāng)前動畫的對象上執(zhí)行 stop(true)方法,下面有個不錯的示例感興趣的朋友不要錯過
    2013-11-11
  • jQuery的時間datetime控件在AngularJs中的使用實例(分享)

    jQuery的時間datetime控件在AngularJs中的使用實例(分享)

    下面小編就為大家?guī)硪黄猨Query的時間datetime控件在AngularJs中的使用實例(分享)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • JQuery入門基礎(chǔ)小實例(1)

    JQuery入門基礎(chǔ)小實例(1)

    這篇文章主要講述了一個JQuery入門基礎(chǔ)小實例,實現(xiàn)的過程效果都很簡單,特別適合初學(xué)者來學(xué)習(xí),感興趣的小伙伴們可以參考一下
    2015-09-09
  • jQuery的bind()方法使用詳解

    jQuery的bind()方法使用詳解

    bind()定義和用法:bind() 方法向被選元素添加一個或多個事件處理程序,以及當(dāng)事件發(fā)生時運行的函數(shù)。
    2015-07-07

最新評論