简单的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 相关文章推荐
javascript下操作css的float属性的特殊写法
Aug 22 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
js尾调用优化的实现
May 23 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
js中实现继承的五种方法
Jan 25 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游戏编程25个脚本代码
2011/02/08 PHP
php数组随机排序实现方法
2015/06/13 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
js function使用心得
2010/05/10 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
bootstrap fileinput完整实例分享
2016/11/08 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python中拆分字符串的操作方法
2019/07/23 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
岗位职责定义及内容
2013/11/08 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
乳制品整治工作方案
2014/05/29 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
用电申请报告范文
2015/05/18 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript