曾被问到这个问题,不知所措,后来在网上找到了.大神文章: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. OC之property和自动释放池

    property实例 property参数 自动释放池 一.property实例 1.前边的例子我们看到,我们在一个类中如果用到另外一个类的实例作为自己的成员变量时,通常需要在setter方法中,先r ...

  2. Genymotion——PC上也能玩部落冲突 Clash of Clans

    零.前言 部落冲突(Clash of Clans)是手机上一个很不错的联机对战游戏,安卓和iOS平台上都有. 最近玩这个略上瘾,前几天看到部落里有人说用模拟器可以在电脑上玩,就想自己试试. 不想看我啰 ...

  3. hg(Mercurial)版本库迁移到git版本库

    这几天没事干净搞迁移了,迁移完MVC又迁移版本库,还把工作电脑迁移了一下,开始用Win8.1了.这个迁移主要是因为实在不想在工作电脑上又装git又装hg了,点个右键出来一大堆菜单,况且现在git已经成 ...

  4. VC++ UTF-8与GBK格式转换

    // 注释:多字节包括GBK和UTF-8 int GBK2UTF8(char *szGbk,char *szUtf8,int Len) { // 先将多字节GBK(CP_ACP或ANSI)转换成宽字符 ...

  5. codeforces 676B B. Pyramid of Glasses(模拟)

    题目链接: B. Pyramid of Glasses time limit per test 1 second memory limit per test 256 megabytes input s ...

  6. POJ 3422 Kaka's Matrix Travels K取方格数

    题目:给出n*n的方格矩阵,现在从左上方走m次到右下方,问m次能够获得的最大价值和. 分析:最大费用流.拆点进行限制每个格子只取一次,假设点x拆成 x,xx,右边(假设有)y,yy,下方(假设有)z, ...

  7. java中初始化时机和顺序呢

    class Pupil{ Pupil(int age){ System.out.println("Pupil:"+age); } } class Teacher{ Pupil p1 ...

  8. OSPF路由汇总和默认路由设置

    目标 掌握OSPF路由汇总的配置 掌握OSPF默认路由的配置 一.——区域间汇总 配置IP,R2四个环回口 R1(config)#inter s1/0 R1(config-if)#ip add 200 ...

  9. highcharts 图表库的简单使用

    Highcharts简介: Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图 ...

  10. 20150515--关于IIS的备忘（WIN7）

    一.IIS服务位置: 1)控制面板--程序和功能 2)点击打开或关闭Windows功能, 3)Internet服务信息(英文:internet information services)--Web管理 ...