利用div实现遮罩层效果就是利用一个全屏、半透明的div遮住页面上其它元素，典型的例子就是百度的登录界面。下面贴出示例代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>全屏div</title>

<style>

html,body {

    margin:0;

    height:100%;

}

#test {

    width:100%;

    height:100%;

    background-color:#000;

    position:absolute;

    top:0;

    left:0;

    z-index:2;

    opacity:0.3;

    /*兼容IE8及以下版本浏览器*/

    filter: alpha(opacity=30);

    display:none;

}

#log_window {

    width:200px;

    height:200px;

    background-color:#FF0;

    margin: auto;

    position: absolute;

    z-index:3;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    display:none;

}

</style>

<script>

function shield(){

    var s = document.getElementById("test");

    s.style.display = "block";

    var l = document.getElementById("log_window");

    l.style.display = "block";

}

function cancel_shield(){

    var s = document.getElementById("test");

    s.style.display = "none";

    var l = document.getElementById("log_window");

    l.style.display = "none";

}

</script>

</head>

<body>

<a href="javascript:shield()">打开遮罩</a>

<div id="test"></div>

<div id="log_window">

<a href="javascript:cancel_shield()">关闭</a>

</div>

</body>

</html>

利用div实现遮罩层效果的更多相关文章

  1. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  2. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  3. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

  4. div+css遮罩层

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

  5. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

  6. Android 遮罩层效果

    (用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

  7. jQuery弹出遮罩层效果完整示例

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

  8. Android 遮罩层效果--制作圆形头像

    (用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

  9. 前端页面给指定的div添加遮罩层，并且带有加载中的小旋转图片

    话不多说,先上代码,其实还是比较简单的 $("<div id='shade' style='opacity:0.85;background:white'></div> ...

随机推荐

  1. SDL教程第一和第二个视频的笔记

    观看正月点灯笼的SDL教程,地址http://www.tudou.com/listplay/9eG9tkk91oQ.html #include <stdio.h> #include < ...

  2. 跨平台日志清理工具 Log-Cutter v2.0.1 RC-1 发布

    Log-Cutter 是JessMA开源组织开发的一个简单实用的日志切割清理工具.对于服务器的日常维护来说,日志清理是非常重要的事情,如果残留日志过多则严重浪费磁盘空间同时影响服务的性能.如果用手工方 ...

  3. docker nginx1.7.6+keepalived实现双机热备

    0.前提条件 环境两台ubuntu版本14.04 64位系统(并获取root权限) 假设两台服务器ip为:172.16.34.214(master),172.16.34.215(backup),kee ...

  4. spring mvc WebArgumentResolver不生效

    WebArgumentResolver: SPI for resolving custom arguments for a specific handler method parameter. Typ ...

  5. Could not publish to the server. java.lang.NullPointerException

    右键单击tomcat服务器,找到Properties,点下switch location就好了.

  6. git怎么创建本地版本仓库

    git怎么创建本地版本仓库 安装git我就不用说了吧!下载地址:https://github.com/msysgit/msysgit/releases/download/Git-1.9.4-previ ...

  7. [转]搭建Maven私服

    在开发过程中,有时候会使用到公司内部的一些开发包,显然把这些包放在外部是不合适的.另外,由于项目一直在开发中,这些内部的依赖可能也在不断的更新.可以通过搭建公司内部的Maven服务器,将第三方和内部的 ...

  8. 如何设置'REUSE_ALV_GRID_DISPLAY'的单个单元格的颜色

    REPORT ydemo_rick_a . TYPE-POOLS: slis. , carrid LIKE sflight-carrid, connid LIKE sflight-connid, fl ...

  9. 封装Nvelocity的渲染方法

    public class CommonHelper { /// <summary> /// 用data数据填充templatename模板,渲染返回html返回 /// </summ ...

  10. 基于 VLC 的 Android 多媒体解决方案

    前段时间项目中需要在 Android 中播放视频.流媒体.查看监控,就研究了一下 Android 多媒体解决方案. 查找了一下,大致有如下几种: Android MediaPlayer FFmpeg ...