简单的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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
layui动态绑定事件的方法
Sep 20 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 替换模板变量实现步骤
2009/08/24 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
密码强度检测效果实现原理与代码
2013/01/04 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
Python中获取网页状态码的两个方法
2014/11/03 Python
python实现简单的socket server实例
2015/04/29 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
临床医学专业个人的自我评价
2013/09/27 职场文书
大学生年度自我鉴定
2013/10/31 职场文书
法警的竞聘演讲稿
2014/01/02 职场文书
自我鉴定书面格式
2014/01/13 职场文书
面试后的英文感谢信
2014/02/01 职场文书
护士毕业实习感言
2014/03/05 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
保护环境建议书100字
2014/05/13 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
个人贷款收入证明
2014/10/26 职场文书
见习期个人总结
2015/03/05 职场文书
清洁工工作总结
2015/08/11 职场文书