jQuery弹出遮罩层效果完整示例
网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章主要介绍了jQuery弹出遮罩层效果,结合完整实例形式分析了jQuery遮罩层的动态创建与使用技巧,需要的朋友可以参考下
本文实例讲述了jQuery弹出遮罩层效果。分享给大家供大家参考,具体如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://.w3./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; : 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; :10px;">关闭遮罩层</button> <h3 align="center"><a href="https://.jb51./">阅谁问君诵,水落清香浮。</a></h3> <div style="height:10000px;"></div> <div id="overlay"></div> </body> </html>
运行效果图如下:
PS:该源码兼容IE6+,火狐,谷歌,苹果,欧朋等主流的浏览器。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
上一篇:javascript数组遍历的方法实例分析
下一篇:JS简单去除数组中重复项的方法
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程