jQuery弹出遮罩层效果完整示例


Posted in Javascript onSeptember 13, 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 遮罩层</title>
<style type="text/css">
/* 半透明的遮罩层 */
#overlay {
  background: #000;
  filter: alpha(opacity=50); /* IE的透明度 */
  opacity: 0.5; /* 透明度 */
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 100; /* 此处的图层要大于页面 */
  display:none;
  _background-color:#a0a0a0; /* 解决IE6的不透明问题 */
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/* 显示遮罩层 */
function showOverlay() {
  $("#overlay").height(document.body.scrollHeight);
  $("#overlay").width(document.body.scrollWidth);
  // fadeTo第一个参数为速度,第二个为透明度
  // 多重方式控制透明度,保证兼容性,但也带来修改麻烦的问题
  $("#overlay").fadeTo(200, 0.5);
  // 解决窗口缩小时放大后不全屏遮罩的问题
  // 简单来说,就是窗口重置的问题
  $(window).resize(function(){
    $("#overlay").height(document.body.scrollHeight);
    $("#overlay").width(document.body.scrollWidth);
  });
}
/* 隐藏覆盖层 */
function hideOverlay() {
  $("#overlay").fadeOut(200);
}
</script>
</head>
<body>
<button onClick="showOverlay();" style=" width:100px; height:60px; margin:40px auto 40px auto; display:block;">打开遮罩层</button>
<button onClick="hideOverlay();" style=" width:100px; height:60px; z-index:101; display:block; position:absolute; left:10px; top:10px;">关闭遮罩层</button>
<h3 align="center"><a href="https://3water.com/">阅谁问君诵,水落清香浮。</a></h3>
<div style="height:10000px;"></div>
<div id="overlay"></div>
</body>
</html>

运行效果图如下:

jQuery弹出遮罩层效果完整示例

PS:该源码兼容IE6+,火狐,谷歌,苹果,欧朋等主流的浏览器。

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

Javascript 相关文章推荐
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
elementui实现预览图片组件二次封装
Dec 29 Javascript
JS简单去除数组中重复项的方法
Sep 13 #Javascript
jQuery包裹节点用法完整示例
Sep 13 #Javascript
jQuery查找节点方法完整实例
Sep 13 #Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 #Javascript
jQuery实现的放大镜效果示例
Sep 13 #Javascript
jQuery实现的简单拖拽功能示例
Sep 13 #Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 #Javascript
You might like
apache mysql php 源码编译使用方法
2012/05/03 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
Python正则表达式匹配ip地址实例
2014/10/09 Python
python对html过滤处理的方法
2018/10/21 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
制药工程专业职业生涯规划范文
2014/03/10 职场文书
2015年推普周活动总结
2015/03/27 职场文书
通知函格式范文
2015/04/27 职场文书
小学德育工作总结2015
2015/05/12 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python