曾被问到这个问题,不知所措,后来在网上找到了.大神文章: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. Java学习笔记——Java工厂模式之简单工厂

    package com.app; import java.util.Date; /* * 工厂模式:简单工厂.工厂方法.抽象工厂 * * */ public class Test0718_Factor ...

  2. ubuntu系统下安装gstreamer的ffmpeg支持

    当您在安装gstreamer到您的ubuntu系统中时,为了更好地进行流媒体开发,需要安装ffmpeg支持,但一般情况下,直接使用 sudo apt-get install gstreamer0.10 ...

  3. POJ 2349 Arctic Network (最小生成树)

    Arctic Network Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Subm ...

  4. tornado 杂记

    一.建立一个简单的 hello world 网页 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import tornado.iolo ...

  5. BZOJ 3043

    Description 给定一个长度为n的数列{a1,a2...an},每次可以选择一个区间[l,r],使这个区间内的数都加一或者都减一.问至少需要多少次操作才能使数列中的所有数都一样,并求出在保证最 ...

  6. 数据库知识（主要基于Oracle，Sql可参考）

    1.关于Union的知识 select 11 from dual union select 11 from dual 和 select 11 from dual union all select 11 ...

  7. 504 Gateway Time-out 和 502 Bad Gateway相关处理

    若报:504 Gateway Time-out则与nginx有关 解决方案: #vim nginx.conf 添加以下代码: http{ fastcgi_connect_timeout 300; fa ...

  8. OGNL 对象视图导航语言

    [Object Graphics Navigate Language] 类似于EL(Expression Language)表达式, 可以帮助我们在配置文件.JSP中来获取对象的值 这门语言比EL功能 ...

  9. PAT1003——我要通过！

    “答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于PAT的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否则输出“答案错误”. 得到“答案正确”的条件是: 1 ...

  10. android:launchMode概述

    android:launchMode An instruction on how the activity should be launched. There are four modes that ...