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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 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
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
Angular的$http与$location
2016/12/26 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python实现的一个火车票转让信息采集器
2014/07/09 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
Python3最长回文子串算法示例
2019/03/04 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
销售求职信范文
2014/05/26 职场文书
董事长助理工作职责
2014/06/08 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
酒店辞职书范文
2015/02/26 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB