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 相关文章推荐
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
json数据的列循环示例
Sep 06 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 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
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
详解创建自定义的Angular Schematics
2018/06/06 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
Python的另外几种语言实现
2015/01/29 Python
python每隔N秒运行指定函数的方法
2015/03/16 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
python递归全排列实现方法
2018/08/18 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
python 代码运行时间获取方式详解
2020/09/18 Python
高三自我鉴定范文
2013/10/19 职场文书
超市营业员岗位职责
2013/12/20 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
采购经理岗位职责
2014/02/16 职场文书
商铺租房协议书范本
2014/12/04 职场文书
毕业设计致谢语
2015/05/14 职场文书
入党积极分子群众意见
2015/06/01 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis