简单的Jquery遮罩层代码实例


Posted in Javascript onNovember 14, 2013

Css代码

 #brg
{
 width: 100%;
 height: 100%;
 background: #333;
 position: absolute;
 top: 0;
 left: 0;
 filter: alpha(opacity=60);
 -moz-opacity: 0.6;
 opacity: 0.6;
 position: absolute;
 top: 0;
 left: 0;
 display: none;
}
#showdiv
{
 width: 100%;
 height: auto;
 position: absolute;
 left: 300px;
 top: 150px;
 z-index: 330;
 display: none;
}
#testdiv
{
 width: 800px;
 height: auto;
 margin: 0 0;
 border: 1px solid #4d4d4d;
 background: #f2f2f2;
}
#close
{
 width: 200px;
 height: 27px;
 line-height: 27px;
 font-size: 14px;
 font-weight: bold;
 border: 1px solid #4d4d4d;
 text-align: center;
 cursor: pointer;
 margin: 0 auto;
 background: #333;
 color: #fff;
}

Html 代码

 <div id="brg">
    </div>
    <div id="showdiv">
        <div id="close">
            关闭
        </div>
        <div id="testdiv">

  要显示的内容
        </div>
    </div>

Jquery 代码

 $(document).ready(function() {
            var bheight = document.body.clientHeight;
            $("#btnAdd").click(function() {
                $("#brg").css("display", "block");
                $("#showdiv").css("display", "block");
                $("#brg").css("height", document.body.scrollHeight);
                $("#showdiv").css("top", document.body.scrollTop + 100);
            });
            $("#close").click(function() {
                $("#brg").css("display", "none");
                $("#showdiv").css("display", "none");
            });
        });
Javascript 相关文章推荐
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 #Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 #Javascript
MyEclipse取消验证Js的两种方法
Nov 14 #Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 #Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 #Javascript
javascript按位非运算符的使用方法
Nov 14 #Javascript
javascript Array.prototype.slice的使用示例
Nov 14 #Javascript
You might like
php实现快速排序的三种方法分享
2014/03/12 PHP
php常用hash加密函数
2014/11/22 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
js正则相关知识点专题
2018/05/10 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
Python中无限元素列表的实现方法
2014/08/18 Python
python:socket传输大文件示例
2017/01/18 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
python实现连续图文识别
2018/12/18 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
保荐人的岗位职责
2013/11/19 职场文书
小班重阳节活动方案
2014/02/08 职场文书
暑期研修感言
2014/02/17 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
相亲大会策划方案
2014/06/05 职场文书
运动员获奖感言
2014/08/15 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
pytorch中的 .view()函数的用法介绍
2022/03/17 Python
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android