jQuery遮罩层效果实例分析


Posted in Javascript onJanuary 14, 2016

本文实例分析了jQuery遮罩层效果。分享给大家供大家参考,具体如下:

先来看看示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<mce:script type="text/javascript" src="jquery-1.4.4.min.js" mce_src="jquery-1.4.4.min.js"></mce:script>
<title>Example | xHTML1.0</title>
<mce:style>
<!--  *{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#full_box{
background-color:gray;
display:none;
z-index:3;
position:absolute;
left:0px;
top:0px;
filter:Alpha(Opacity=30);
/* IE */
-moz-opacity:0.4;
/* Moz + FF */
opacity: 0.4;
}
#dialog{
position:absolute;
width:200px;
height:200px;
background:#F00;
display:none;
z-index:5;
}
-->
</mce:style>
<style mce_bogus="1">
*{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#full_box{
background-color:gray;
display:none;
z-index:3;
position:absolute;
left:0px;
top:0px;
filter:Alpha(Opacity=30);
/* IE */
-moz-opacity:0.4;
/* Moz + FF */
opacity: 0.4;
}
#dialog{
position:absolute;
width:200px;
height:200px;
background:#F00;
display:none;
z-index:5;
}
</style>
<mce:script type="text/javascript">
<!--
function showBox() {
var bH = $(window).height();
var bW = $(window).width();
$("#full_box").css({width:bW,height:bH,display:"block"});
var objWH = getObjWh('dialog');
var tbT = objWH.split("|")[0] + "px";
var tbL = objWH.split("|")[1] + "px";
$("#dialog").css({top:tbT,left:tbL,display:"block"});
$("#dialog_content").html("<div style="text-align:center" mce_style="text-align:center">正在加载,请稍后...</div>");
$(window).scroll(function (){ resetBox();});
$(window).resize(function (){ resetBox();});
}
function resetBox() {
var full_box = $("#full_box").css("display");
if (full_box == 'block') {
var bH = $(window).height();
var bW = $(window).width();
var objWH = getObjWh('dialog');
var tbT = objWH.split("|")[0] + "px";
var tbL = objWH.split("|")[1] + "px";
$("#dialog").css({top:tbT,left:tbL,display:"block"});
}
}
function getObjWh(obj) {
var st = $(window).scrollTop();
var sl = $(window).scrollLeft();
var ch = $(window).height();
var cw = $(window).width();
var objH = $("#"+obj).height();
var objW = $("#"+obj).width();
var objT = Number(st) + (Number(ch) - Number(objH))/2;
var objL = Number(sl) + (Number(cw) - Number(objW))/2;
return objT +"|" +objL;
}
function closeBox() {
$("#dialog").css("display","none");
$("#full_box").css("display","none");
}
// -->
</mce:script>
<button id="click" onclick="showBox()">click</button>
<div id="full_box"></div>
<div id="dialog">
<div id="dialog_content"></div>
<div style="text-align:center;" mce_style="text-align:center;">
<a href="#" mce_href="#" onclick="closeBox();">关闭</a>
</div>
</div>
</body>
</html>

其实遮罩层原理很简单。

一个div 遮住下面的内容。

其中比较关键的一个css 样式是

x-index: 整数值

数值越大在越上层,越小就在越下层,可以是负数。

上面的js 代码有部分错误。下面已经修正。

//显示层
function showBox(id) {
    var bH = document.body.offsetHeight;//$(window).height();
    var bW = document.body.offsetWidth;//$(window).width();
    if (bH < $(window).height())
    {
      bH = $(window).height();
    }
    $("#full_box").css({width:bW,height:bH,display:"block"});
    var objWH = getObjWh('dialog');
    var tbT = objWH.split("|")[0] + "px";
    var tbL = objWH.split("|")[1] + "px";
    if(id=='template'){
      $("#div_template").show();
    }else if(id == 'history'){
      $("#div_history").show();
    }else{
      $("#tree_"+id).show();
    }
    $(window).scroll(function (){ resetBox(id);});
    $(window).resize(function (){ resetBox(id);});
}
//重置层
function resetBox(id) {
    var full_box = $("#full_box").css("display");
    if (full_box == 'block') {
      var bH = document.body.offsetHeight;//$(window).height();
      var bW = document.body.offsetWidth;//$(window).width();
      if (bH < $(window).height())
      {
        bH = $(window).height();
      }
      var objWH = getObjWh('dialog');
      var tbT = objWH.split("|")[0] + "px";
      var tbL = objWH.split("|")[1] + "px";
      $(".dialog").css({top:tbT,left:tbL});
      $("#full_box").css({width:bW,height:bH});
    }
}
//获得层参数
function getObjWh(obj) {
    var st = $(window).scrollTop();
    var sl = $(window).scrollLeft();
    var ch = $(window).height();
    var cw = $(window).width();
    var objH = $("#"+obj).height();
    var objW = $("#"+obj).width();
    var objT = Number(st) + (Number(ch) - Number(objH))/2;
    var objL = Number(sl) + (Number(cw) - Number(objW))/2;
    return objT +"|" +objL;
}
//关闭层
function closeBox(id) {
    if(id == 'template'){
       $("#div_template").hide();
    }else if(id == 'history'){
      $("#div_history").hide();
    }else{
      $("#tree_"+id).hide();
    }
    $("#full_box").hide();
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 #Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 #Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 #Javascript
jQuery div拖拽用法实例
Jan 14 #Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 #Javascript
分享jQuery插件的学习笔记
Jan 14 #Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 #Javascript
You might like
PHP伪静态写法附代码
2008/06/20 PHP
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
浅析php数据类型转换
2014/01/09 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
JS实现数组的增删改查操作示例
2018/08/29 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
银行实习生的自我评价
2013/12/09 职场文书
租房合同协议书
2014/04/09 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
教师听课学习心得体会
2016/01/15 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android