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实现放大镜简洁代码(推荐)
Jun 08 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
jQuery实现动态操作table行
Nov 23 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 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
Mysql的常用命令
2006/10/09 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
解读! Python在人工智能中的作用
2017/11/14 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
Sanic框架路由用法实例分析
2018/07/16 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
总经理助理的八要求
2013/11/12 职场文书
内容编辑个人求职信
2013/12/10 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
保卫工作个人总结
2015/03/03 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
mysql分表之后如何平滑上线详解
2021/11/01 MySQL