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

我想实现的效果没有上面那么多,仅仅出现一个灰蒙蒙的div层就可以了,所以做了一些改动.

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

  <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <title>DIV CSS遮罩层</title>

 <script language="javascript" type="text/javascript">

     function showdiv() {

         document.getElementById("bg").style.display = "block";

     }

     function hidediv() {

         document.getElementById("bg").style.display = 'none';

     }

 </script>

 <style type="text/css">

 #bg{ display: none;

      position: absolute;

      top: 10%;

      left: 10%;

      width: 80%;

      height: 80%;

      background-color: grey;

      z-index:1;

      -moz-opacity: 0.7;            /*不知道有啥用*/

      opacity:0.70;                /*不知道有啥用*/

      filter: alpha(opacity=10);  /*这个是真正起作用的*/

      }

 </style>

 </head>

 <body>

 <input id="btnshow" type="button" value="Show" onclick="showdiv();"/><br/><br/>

 <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>

 <div id="bg"></div>

 </body>

 </html>

div+css遮罩层的更多相关文章

  1. div+css 遮罩层

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

  2. CSS遮罩层的实现

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

  3. 利用div实现遮罩层效果

    利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...

  4. CSS 遮罩层、滑出页面

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

  5. CSS遮罩层简易写法

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

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

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

  7. css遮罩层

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

  8. CSS遮罩层，全兼容

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

  9. 子div作为遮罩层

    效果图: 子div的代码:

随机推荐

  1. 翻译：WebApi 认证--用户认证Oauth解析

        The Web API v2用户认证模板提供了流行的应用用户认证场景,如.使用本地帐号的用户名密码认账 (包括创建用户.设置和修改密码)以及使用第三方的认证方式,如facebook,googl ...

  2. Laravel自学第一课：laravel下载与安装

    本地安装laravel,php环境要配置好,推荐xmapp一键搭建. 1.程序包直接从官方下载,官方开源地址:https://github.com/laravel/laravel(当然也可从此网站:h ...

  3. 基于http协议的api接口对于客户端的身份认证方式以及安全措施

    由于http是无状态的,所以正常情况下在浏览器浏览网页,服务器都是通过访问者的cookie(cookie中存储的jsessionid)来辨别客户端的身份的,当客户端进行登录服务器也会将登录信息存放在服 ...

  4. [转]DllMain中不当操作导致死锁问题的分析——DllMain中要谨慎写代码（完结篇）

    在CSDN中发现这篇文章,讲解的比较详细,所以在这里备份一个.原文链接:http://blog.csdn.net/breaksoftware/article/details/8167641 DllMa ...

  5. 【Mood-17】 github中在本地进行上传的时候出现ERROR: Repository not found. fatal: The remote end hung up unexpectedly

    一开始出现这个错误的时候还感觉很奇怪,我明明在在本地中相应的库文件夹命令中输入: vim ./git/config 将文件中的 [remote “origin"]部分去掉!

  6. 【Android 界面效果30】Android中ImageSwitcher结合Gallery展示SD卡中的资源图片

    本文主要是写关于ImageSwitcher结合Gallery组件如何展示SDCard中的资源图片,相信大家都看过API Demo 中也有关于这个例子的,但API Demo 中的例子是展示工程中Draw ...

  7. UICollectionView 简单应用和实际操作

    1.网格视图   UICollectionView      网格布局 UICollectionViewFlowLayout系统图自带网格布局 系统自带的网格布局 UICollectionViewFl ...

  8. Oracle基础 游标

    一.游标 游标用来处理从数据库中检索的多行记录(使用SELECT语句).利用游标,程序可以逐个地处理和遍历一次检索返回的整个记录集. 为了处理SQL语句,Oracle将在内存中分配一个区域,这就是上下 ...

  9. Oracle基础 PL-SQL编程基础（4） 异常处理

    异常处理: 即使良好的PL-SQL程序也会遇到错误或者未预料的事件,一个优秀的程序都应该能够处理各种出错情况,尽可能的从错误中恢复.程序在运行时出现的错误成为异常.发生异常后,语句讲终止执行,PLSQ ...

  10. Umbraco（4）-Outputting the Document Type Properties（翻译文档）

    翻译原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco4outputting-the-document-typ ...