<div id="body"> 显示页面的全部内容
<div id="open">打开弹框</div>
</div>
//页面的遮罩层
<div id="cover"></div>
//页面的弹出框
<div id="modal">
<div id="close">关闭弹框</div>
</div>
<script>
$(document).ready(function(){
$("#open").click(function() {
cover.style.display="block"; //显示遮罩层
modal.style.display="block"; //显示弹出层
})
$("#close").click(function() {
cover.style.display="none"; //隐藏遮罩层
modal.style.display="none"; //隐藏弹出层
})
})
</script>
#cover{
position:absolute;left:0px;top:0px;
background:rgba(, , , 0.4);
width:%; /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/
height:%;
filter:alpha(opacity=); /*设置透明度为60%*/
opacity:0.6; /*非IE浏览器下设置透明度为60%*/
display:none;
z-Index:;
}
#modal{
position:absolute;
width:500px;
height:300px;
top:%;
left:%;
background-color:#fff;
display:none;
cursor:pointer;
z-Index:;
}

css---遮罩层的更多相关文章

  1. div+css遮罩层

    曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html 我想实现的效果没 ...

  2. CSS遮罩层的实现

    偶然发现自己原来写了一个CSS遮罩层,虽然这个东西没什么技术含量,但如果本人离开公司后又遇见此类问题,那么可能又得花些时间来找资料了.所以决定还是把它记下来吧. 直接上代码吧. 第一步,html代码: ...

  3. CSS 遮罩层、滑出页面

    <style> .panel_bak { position:fixed; bottom:0; display:none; width:100%; margin:0px; padding:5 ...

  4. CSS遮罩层简易写法

      现在很多站点弹出框,都需要一个遮罩层.写法很多,以下是我比较喜欢的一种: .box{ position:absolute; top:0; bottom:0; left:0; right:0; ba ...

  5. div+css 遮罩层

    CSS样式部分: ---------------------------------- <style type="text/css">#loading-mask{    ...

  6. css遮罩层

    父元素:position:fixed; 让子元素居中对齐:position:absolute;top:0;bottom:0;left:0;right:0;margin:auto; <style& ...

  7. CSS遮罩层,全兼容

    <script type="text/javascript"> $(function(){ $('#divLocker').css({ "position&q ...

  8. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JS+CSS简单实现DIV遮罩层显示隐藏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. jQuery遮罩层插件

    在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...

随机推荐

  1. Object.keys 及表单清空

    Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性.这些属性的顺序与手动遍历该对象属性时的一致. // simple array var ar ...

  2. Thrift 入门教程

    1. 概述 thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Go,Python, PHP, Ruby, Erl ...

  3. Dynamics 365新引入了多选选项集类型字段

    本人微信和易信公众号:微软动态CRM专家罗勇 ,回复276或者20180630可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong.me ...

  4. SAP MM 启用批次管理的物料MB21创建预留单据时批次号可以为空!

    SAP MM 启用批次管理的物料MB21创建预留单据时批次号可以为空! 如下预留, 批次号字段为空. 实际上该物料是有激活batch management的, For MB21, it is just ...

  5. SpreadJS使用进阶指南 - 使用 NPM 管理你的项目

    前言 SpreadJS作为一款性能出众的纯前端电子表格控件,自2015年发布以来,已经被广泛应用于各领域“在线Excel”数据管理项目中.NPM,作为管理Node.js库最有力的手段,解决了很多Nod ...

  6. iOS----------输入框UITextField禁止输入空格

    方法一:添加代理 - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range rep ...

  7. 理解java的三种代理模式

    代理模式是什么 代理模式是一种设计模式,简单说即是在不改变源码的情况下,实现对目标对象的功能扩展. 比如有个歌手对象叫Singer,这个对象有一个唱歌方法叫sing(). 1 public class ...

  8. Linux 配置本地源 (Ubuntu / CentOS)

    目录 Linux local source list A. Ubuntu 1. 本地ISO 2. 制作本地源 B. CentOS 1. 本地ISO Linux local source list A. ...

  9. java中split特殊符号

    关于点的问题是用string.split("[.]") 解决. 关于竖线的问题用 string.split("\\|")解决. 关于星号的问题用 string. ...

  10. 【转载】FPGA算法设计随笔

    FPGA设计算法依次需要完成MATLAB浮点仿真 MATLAB定点仿真 verilogHDL定点运算以及数据对比的流程.其中浮点到定点的转换尤为重要,需要在数据表示范围和精度之间做出权衡.另外掌握定点 ...