jQuery实现的模拟弹出窗口功能示例


Posted in Javascript onNovember 24, 2016

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

Javascript 相关文章推荐
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
vue 文件目录结构详解
Nov 24 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 #Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 #Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 #Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 #Javascript
BootStrap树状图显示功能
Nov 24 #Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 #Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 #Javascript
You might like
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
Position属性之relative用法
2015/12/14 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
英语专业学生个人求职信
2014/01/28 职场文书
施工工地安全标语
2014/06/07 职场文书
社区活动策划方案
2014/08/21 职场文书
2014年残联工作总结
2014/11/21 职场文书
紫日观后感
2015/06/05 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
Python实现日志实时监测的示例详解
2022/04/06 Python
代码复现python目标检测yolo3详解预测
2022/05/06 Python