jQuery实现可兼容IE6的遮罩功能详解


Posted in jQuery onSeptember 19, 2017

本文实例讲述了jQuery实现可兼容IE6的遮罩功能。分享给大家供大家参考,具体如下:

最精简,最强大的 jQuery 遮罩层效果。

当浏览器改变大小时,遮罩层的大小会相应地改变。

遮罩层上方的对话框可随 scroll 的改变而改变,即对话框在浏览器居中显示。

HTML 代码

<div id="main"><a onclick="showBg();" href="#" rel="external nofollow" rel="external nofollow" >点击这里看 jQuery 遮罩层效果.</a></div>
<div id="fullbg"></div>
<div id="dialog">
<p class="close"><a onclick="closeBg();" href="#" rel="external nofollow" rel="external nofollow" >关闭</a></p>
正在加载,请稍后...
</div>

CSS 代码

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin: 0;
}
#main {
  height: 1800px;
  padding-top: 90px;
  text-align: center;
}
#fullbg {
  background-color: Gray;
  left: 0px;
  opacity: 0.5;
  position: absolute;
  top: 0px;
  z-index: 3;
  filter: alpha(opacity=50); /* IE6 */
  -moz-opacity: 0.5; /* Mozilla */
  -khtml-opacity: 0.5; /* Safari */
}
#dialog {
  background-color: #FFF;
  border: 1px solid #888;
  display: none;
  height: 200px;
  left: 50%;
  margin: -100px 0 0 -100px;
  padding: 12px;
  position: fixed !important; /* 浮动对话框 */
  position: absolute;
  top: 50%;
  width: 200px;
  z-index: 5;
}
#dialog p {
  margin: 0 0 12px;
}
#dialog p.close {
  text-align: right;
}

jquery 代码

<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//显示灰色 jQuery 遮罩层
function showBg() {
  var bh = $("body").height();
  var bw = $("body").width();
  $("#fullbg").css({
    height:bh,
    width:bw,
    display:"block"
  });
  $("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
  $("#fullbg,#dialog").hide();
}
</script>
<!--[if lte IE 6]>
<script type="text/javascript">
// 浮动对话框
$(document).ready(function() {
  var domThis = $('#dialog')[0];
  var wh = $(window).height() / 2;
  $("body").css({
    "background-image": "url(about:blank)",
    "background-attachment": "fixed"
  });
  domThis.style.setExpression('top', 'eval((document.documentElement).scrollTop + ' + wh + ') + "px"');
});
</script>
<![endif]-->

这里别忘记引入jquery文件

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

jQuery 相关文章推荐
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 #jQuery
jQuery实现简单日期格式化功能示例
Sep 19 #jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 #jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 #jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 #jQuery
jQuery选择器之子元素选择器详解
Sep 18 #jQuery
jQuery实现的表格前端排序功能示例
Sep 18 #jQuery
You might like
Destoon实现多表查询示例
2014/08/21 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
javascript常用方法汇总
2014/12/02 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
python实现抖音视频批量下载
2018/06/20 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
python列表推导式入门学习解析
2019/12/02 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
法学专业毕业生自荐信
2014/06/11 职场文书
合作协议书格式
2014/08/19 职场文书
销售竞赛活动方案
2014/08/23 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
放假通知
2015/04/14 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
靠谱的活动总结
2019/04/16 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server