简单的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实现的所谓的滑动门
May 23 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
js实现炫酷光感效果
Sep 05 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
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中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
在react中使用vuex的示例代码
2018/07/30 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
python服务器端收发请求的实现代码
2014/09/29 Python
Python装饰器基础详解
2016/03/09 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
详解django.contirb.auth-认证
2018/07/16 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
小学生评语集锦
2014/04/18 职场文书
市场营销毕业求职信
2014/08/07 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
如何写辞职书
2015/02/26 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
vue封装数字翻牌器
2022/04/20 Vue.js