曾被问到这个问题,不知所措,后来在网上找到了.大神文章: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. 数据结构【二】：简单阻塞队列BlockingQueue

    在POSIX多线程[一]:简单队列simple queue的基础上使用内部互斥锁和条件变量来控制并发以达到线程安全的目的,其主要用于 [生产者-消费者] 队列. 1.BlockingQueue初始化时 ...

  2. [Java] 关键字final、static使用总结

    一.final 根据程序上下文环境,Java关键字final有“这是无法改变的”或者“终态的”含义,它可以修饰非抽象类.非抽象类成员方法和变量.你可能出于两种理解而需要阻止改变:设计或效率.final ...

  3. Java中Integer的最大值和最小值

    从JDK1.0开始,Integer中就定义了MIN_VALUE和MAX-VALUE两个常量: /** * A constant holding the minimum value an {@code ...

  4. 利用apktool反编译apk

    下载apktool所需文件: a. apktool1.5.2.tar.bz2 b.apktool-install-windows-r05-ibot.tar.bz2  (windows系统) 步骤阅读 ...

  5. Linux 网卡设备驱动程序设计（3）

    三.网络子系统深度分析 用户程序通过网络发送这个网络数据包 通过 SCI 协议无关接口 协议栈 <   UDP的实现  会选择路由 <    IP的实现  会建立这个邻居子系统,建立邻居信 ...

  6. 新颖的O2O商业模式，江水平和他的装修队

    文/秦刚 江水平是我微信上的朋友,有一天他给我留言说,秦刚老师我觉得你应该采访我,因为我的商业模式非常新颖有趣,应该能够给很多创业者启发. 我让江水平把他的商业模式写给我,他效率很高,一天就写好给我了 ...

  7. 人情世故&潜规则

    大凡成功的牛人,无一例外都明白这一点.他们读懂了社会的本质和人际交往的潜规则,知道对方需要什么,知道对方脑子里在想什么.你几乎看不见他奔波劳碌,但是在不动声色中,他就已经实现人生目标.他们成功的密码是 ...

  8. 初次尝试ColumnStore Index

    1.首先使用非聚集索引 SET STATISTICS IO ON SET STATISTICS TIME ON SELECT MemberId , MAX(AddDT) AS RecentSucDT ...

  9. .NET使用NPOI读取Word模板并替换关键字并下载

    NPOI 是 POI 项目的 .NET 版本.POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目. 使用 NPOI 你就可以在没有安装 Office 或者相应环境的机器上对 ...

  10. 杭电ACM2097--Sky数

    这题思路很简单,把10,12,16进制数都按位相加,然后进行比较即可. http://acm.hdu.edu.cn/showproblem.php?pid=2097 <span style=&q ...