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上传插件webupload使用方法
Aug 01 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jquery实现拖拽小方块效果
Dec 10 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
一个php作的文本留言本的例子(二)
2006/10/09 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
python删除文件示例分享
2014/01/28 Python
python基础教程之基本内置数据类型介绍
2014/02/20 Python
Python构建XML树结构的方法示例
2017/06/30 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
mac使用python识别图形验证码功能
2020/01/10 Python
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
前台接待的工作职责
2013/11/21 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
残疾人小组计划书
2014/04/27 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
三八节活动主持词
2015/07/04 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android