相思资源网 Design By www.200059.com

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

标签:
jQuery,模拟,弹出窗口

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“jQuery实现的模拟弹出窗口功能示例”

暂无jQuery实现的模拟弹出窗口功能示例的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。