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 日期转换成中文格式的函数
Jul 07 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 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
967 个函式
2006/10/09 PHP
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
php实现记事本案例
2020/10/20 PHP
JavaScript类和继承 prototype属性
2010/09/03 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
python初步实现word2vec操作
2020/06/09 Python
python 6种方法实现单例模式
2020/12/15 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
销售人员中英文自荐信
2013/09/22 职场文书
办公室主任职责范本
2014/03/07 职场文书
学习雷锋倡议书
2014/04/15 职场文书
厂区绿化方案
2014/05/08 职场文书
罚站检讨书
2015/01/29 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
现场施工员岗位职责
2015/04/11 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
python读取mnist数据集方法案例详解
2021/09/04 Python