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 相关文章推荐
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
JavaScript对象学习小结
Sep 02 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
基于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
PHPEXCEL 使用小记
2013/01/06 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
js密码强度检测
2016/01/07 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
深入浅析Python字符编码
2015/11/12 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
python图形用户接口实例详解
2019/12/16 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
外企财务年会演讲稿
2014/01/03 职场文书
文明餐桌活动方案
2014/02/11 职场文书
村干部承诺书
2014/03/28 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
小学班级管理心得体会
2016/01/07 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python