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

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

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

本文實(shí)例講述了jQuery實(shí)現(xiàn)的AJAX簡單彈出層效果。分享給大家供大家參考，具體如下：

運(yùn)行效果截圖如下：

具體代碼如下：

<!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;">
  動(dòng)態(tài)彈出的層<br />
  動(dòng)態(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()">點(diǎn)我1</a><br/><br/>
   <a href="javascript:showDiv2()">點(diǎn)我2</a>
   </div>
 </div>
</body>
</html>

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • UpdatePanel和Jquery沖突的解決方法

    UpdatePanel和Jquery沖突的解決方法

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

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

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

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

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

    jquery(javascript)自動(dòng)序列編號(hào)和屬性編號(hào)實(shí)現(xiàn)代碼

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

    jquery滾動(dòng)特效集錦

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

    jquery select插件異步實(shí)時(shí)搜索實(shí)例代碼

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

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

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

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

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

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

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

    jQuery的bind()方法使用詳解

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

最新評(píng)論