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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
Vue表单实例代码
Sep 05 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
vue路由权限校验功能的实现代码
Jun 07 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
python相似模块用例
2016/03/04 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python实现桌面壁纸切换功能
2019/01/21 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
统计员岗位职责
2013/11/14 职场文书
数字化校园建设方案
2014/05/03 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android