国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

jQuery實現的模擬彈出窗口功能示例

2019-11-19 18:50:09
字體:
來源:轉載
供稿:網友

本文實例講述了jQuery實現的模擬彈出窗口功能。分享給大家供大家參考,具體如下:

//初始化文檔$(document).ready();//----------------彈出DIV仿模態窗口開始----------------var divW;  //DIV寬度var divH;  //DIV高度var clientH;  //瀏覽器高度var clientW;  //瀏覽器寬度var divTitle;  //DIV標題var pageUrl;  //DIV中加載的頁面var div_X;  //DIV橫坐標var div_Y;  //DIV縱坐標function DivWindowOpen(divWidth,divHeight,title,url){  divW = divWidth;  //DIV寬度  divH = divHeight;  //DIV高度  divTitle = title;  //DIV高度  pageUrl = url;  //DIV中加載的頁面UR  lockScreen();  //鎖定背景  divOpen();  $("#divTitle").append(divTitle);  $("#divContent").load(pageUrl);  //交換X圖片  $("#x").hover(    function(){      $(this).attr("src","images/Close-2.gif");    },    function(){      $(this).attr("src","images/Close-1.gif");    }  );  //關閉DIV窗口  $("#x").click(    function(){      clearDivWindow();      clearLockScreen();    }  );}//返回彈出的DIV的坐標function divOpen(){  var minTop = 80;  //彈出的DIV記頂部的最小距離  if($("#divWindow").length == 0){    clientH = $(window).height();  //瀏覽器高度    clientW = $(window).width();  //瀏覽器寬度    div_X = (clientW - divW)/2;  //DIV橫坐標    div_Y = (clientH - divH)/2;  //DIV縱坐標    div_X += window.document.documentElement.scrollLeft;  //DIV顯示的實際橫坐標    div_Y += window.document.documentElement.scrollTop;  //DIV顯示的實際縱坐標    if(div_Y < minTop){      div_Y = minTop;    }    $("body").append("<div id='divWindow'><div id='divTitle'><img src='images/Close-1.gif' id='x' /></div><div id='divContent'>載入中</div></div>");  //增加DIV    //divWindow的樣式    $("#divWindow").css("position","absolute");    $("#divWindow").css("z-index","200");    $("#divWindow").css("left",(div_X + "px"));  //定位DIV的橫坐標    $("#divWindow").css("top",(div_Y + "px"));  //定位DIV的縱坐標    $("#divWindow").css("opacity","0.9");    $("#divWindow").width(divW);    $("#divWindow").height(divH);    $("#divWindow").css("background-color","#FFFFFF");    $("#divWindow").css("border","solid 1px #333333");    //divTitle的樣式    $("#divTitle").css("height","20px");    $("#divTitle").css("line-height","20px");    $("#divTitle").css("background-color","#333333");    $("#divTitle").css("padding","3px 5px 1px 5px");    $("#divTitle").css("color","#FFFFFF");    $("#divTitle").css("font-weight","bold");    //x的樣式    $("#x").css("float","right");    $("#x").css("cursor","pointer");    //divContent的樣式    $("#divContent").css("padding","10px");  }  else{    clientH = $(window).height();  //瀏覽器高度    clientW = $(window).width();  //瀏覽器寬度    div_X = (clientW - divW)/2;  //DIV橫坐標    div_Y = (clientH - divH)/2;  //DIV縱坐標    div_X += window.document.documentElement.scrollLeft;  //DIV顯示的實際橫坐標    div_Y += window.document.documentElement.scrollTop;  //DIV顯示的實際縱坐標    if(div_Y < minTop){      div_Y = minTop;    }    $("#divWindow").css("left",(div_X + "px"));  //定位DIV的橫坐標    $("#divWindow").css("top",(div_Y + "px"));  //定位DIV的縱坐標  }}//鎖定背景屏幕function lockScreen(){  if($("#divLock").length == 0){  //判斷DIV是否存在    clientH = $(window).height();  //瀏覽器高度    clientW = $(window).width();  //瀏覽器寬度    //var docH = $("body").height();  //網頁高度    //var docW = $("body").width();  //網頁寬度    //var bgW = clientW > docW ? clientW : docW;  //取有效寬    //var bgH = clientH > docH ? clientH : docH;  //取有效高    $("body").append("<div id='divLock'></div>")  //增加DIV    $("#divLock").height(clientH);    $("#divLock").width(clientW);    $("#divLock").css("display","block");    $("#divLock").css("background-color","#000000");    $("#divLock").css("position","fixed");    $("#divLock").css("z-index","100");    $("#divLock").css("top","0px");    $("#divLock").css("left","0px");    $("#divLock").css("opacity","0.5");  }  else{    clientH = $(window).height();  //瀏覽器高度    clientW = $(window).width();  //瀏覽器寬度    $("#divLock").height(clientH);    $("#divLock").width(clientW);  }}//清除背景鎖定function clearLockScreen(){  $("#divLock").remove();}//清除DIV窗口function clearDivWindow(){  $("#divWindow").remove();}//窗口大小改變時$(window).resize(    function(){      if($("#divLock").length != 0){        lockScreen();      }      if($("#divWindow").length != 0){        divOpen();      }    });//----------------彈出DIV仿模態窗口結束----------------//改變風格function ChangeStyle(styleName){  skinName = styleName;  //SetCookie("Skin", skinName);  alert(styleName);  window.location.reload();}

更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery窗口操作技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結

希望本文所述對大家jQuery程序設計有所幫助。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 铁岭市| 宕昌县| 莒南县| 新和县| 莎车县| 南平市| 朝阳市| 太仓市| 谷城县| 蓬安县| 乌拉特中旗| 龙州县| 太原市| 文水县| 永春县| 安丘市| 英吉沙县| 无极县| 栾川县| 富阳市| 柳江县| 安图县| 客服| 河间市| 武功县| 湘西| 门头沟区| 岱山县| 绩溪县| 舟山市| 兰坪| 谷城县| 太原市| 罗江县| 齐河县| 弥勒县| 福贡县| 全椒县| 日照市| 黑龙江省| 新巴尔虎右旗|