jquery 创建遮盖层 示例代码
来源:互联网 发布:apache cxf 日志 配置 编辑:程序博客网 时间:2024/05/16 13:04
<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: 100000; /* 此处的图层要大于页面 */ display:none;}</style> <script type="text/javascript"> /* 显示遮罩层 */function showOverlay() { $("#overlay").height(pageHeight()); $("#overlay").width(pageWidth()); // fadeTo第一个参数为速度,第二个为透明度 // 多重方式控制透明度,保证兼容性,但也带来修改麻烦的问题 $("#overlay").fadeTo(200, 0.5); //遮盖层 adjust("#checkcodediv"); $("#checkcodediv").show(); //显示在遮盖层中间位置的弹窗层 }/* 隐藏覆盖层 */function hideOverlay1() { $("#overlay").fadeOut(200); $("#checkcodediv").hide();} /* 当前页面高度 */function pageHeight() { return document.body.scrollHeight;}/* 当前页面宽度 */function pageWidth() { return document.body.scrollWidth;}/* 定位到页面中心 */function adjust(id) { var w = $(id).width(); var h = $(id).height(); var t = scrollY() + (windowHeight()/2) - (h/2); if(t < 0) t = 0; var l = scrollX() + (windowWidth()/2) - (w/2); if(l < 0) l = 0; $(id).css({left: l+'px', top: t+'px' , display:'block'}); /*var winwid = window.inne rWidth || document.documentElement.clientWidth || document.body.clientWidth,winhei = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,pWidTH = $( id ).width(),Pheight = $( id ).height();$( id ).css({top : ( winhei - Pheight )/2,left : ( winwid - pWidTH )/2}); */ }//浏览器视口的高度function windowHeight() { var de = document.documentElement; return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;}//浏览器视口的宽度function windowWidth() { var de = document.documentElement; return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth}/* 浏览器垂直滚动位置 */function scrollY() { var de = document.documentElement; return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;}/* 浏览器水平滚动位置 */function scrollX() { var de = document.documentElement; return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;} </script>
0 0
- jquery 创建遮盖层 示例代码
- jquery 遮盖层进度条
- jquery遮盖层-jquery-loadmask
- Jquery 遮盖层插件 jquery blockui
- CSS+JQUERY实现遮盖层效果
- jQuery和css实现半透明遮盖层
- 遮盖层
- 基于jquery的可移动dialog 和 页面遮盖层
- N层代码示例
- N层代码示例
- 登陆遮盖层
- js 遮盖层
- js遮盖层
- 遮盖层1
- 遮盖层2
- 弹出层 遮盖全局
- ajax 请示 遮盖层
- Jquery13_遮盖层
- 【leetcode-49】Anagrams(java)
- MachineLearning(2)
- Cordys 表结构整理
- 架构师最怕程序员知道的10件事
- java学习之旅51--面向对象_24_内部类详解
- jquery 创建遮盖层 示例代码
- Windows通过DOS命令进入MYSQL的方法
- 使用Node.js + MongoDB实现一个简单的日志分析系统
- Kettle定时执行(先备着)
- 使用Fragment构建灵活的桌面
- iOS 一些常用的宏定义
- log笔记
- 博客开通声明
- shell 参数列表的获取&shell使用的一些总结