简单的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当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
vue环境搭建简单教程
Nov 07 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
前端如何实现动画过渡效果
Feb 05 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
重置版宣传动画
2020/04/09 魔兽争霸
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Django框架中方法的访问和查找
2015/07/15 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
Python遍历numpy数组的实例
2018/04/04 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
对python中各个response的使用说明
2020/03/28 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
幼师专业求职推荐信
2013/11/08 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis