<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. js之正则的坑

    首先给一个神奇的图: 我的反应,精分吧!一会儿true一会儿false的... 后来发现,把g去掉后就正常了,那这是为什么呢??lastIndex惹得鬼! 正文: lastIndex 全局正则表达是, ...

  2. loj#6074. 「2017 山东一轮集训 Day6」子序列(矩阵乘法 dp)

    题意 题目链接 Sol 设\(f[i][j]\)表示前\(i\)个位置中,以\(j\)为结尾的方案数. 转移的时候判断一下\(j\)是否和当前位置相同 然后发现可以用矩阵优化,可以分别求出前缀积和逆矩 ...

  3. 2018 AI产业界大盘点

    2018  AI产业界大盘点 大事件盘点 “ 1.24——Facebook人工智能部门负责人Yann LeCun宣布卸任 Facebook人工智能研究部门(FAIR)的负责人Yann LeCun宣布卸 ...

  4. geoserver发布瓦片,geoserver发布arcgis切片和geoserver发布金字塔切片

    1 转https://www.jianshu.com/p/cf046ec1efd2,分享使用geoserver发布arcgis切片 2 转 http://www.it610.com/article/1 ...

  5. Android中将一个图片切割成多个图片

    有种场景,我们想将一个图片切割成多个图片.比如我们在开发一个拼图的游戏,就首先要对图片进行切割. 以下是封装好的两个类,可以实现图片的切割.仅供参考和学习. 一个是ImagePiece类,此类保存了一 ...

  6. mybatis中:selectKey返回最近插入记录的id

    <insert id="insert" parameterType="com.lls.model.Employee"> <!-- select ...

  7. asyncio异步IO--协程(Coroutine)与任务(Task)详解

    摘要:本文翻译自Coroutines and Tasks,主要介绍asyncio中用于处理协程和任务的方法和接口.在翻译过程中,译者在官方文档的基础上增加了部分样例代码和示意图表,以帮助读者对文档的理 ...

  8. 【温故而知新】HTTP 报文

    HTTP 报文是在 HTTP 应用程序之间发送的数据块.这些数据块以一些文本形式的元信息开头,这些信息描述了报文的内容及含义. 报文流 报文在客户端.服务器和代理之间的流动称为报文流. HTTP 使用 ...

  9. UDK命令

    UDK命令行参数与控制台命令都是大小写不敏感的 命令行  udn中文  udn英文 全词大小写匹配,正则表达式,在c++代码中搜索减号开头的命令行参数(如:-BENCHMARK.-onethread等 ...

  10. 【原】Java学习笔记005 - 流程控制

    package cn.temptation; public class Sample01 { public static void main(String[] args) { // 程序的流程控制(流 ...