曾被问到这个问题,不知所措,后来在网上找到了.大神文章: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. 【HTML5 3】《html5 开发精要与实例讲解》 step2 -- 结构元素 (待续)

    主要内容:通过 一个博客网站和一个企业网站的制作 展示如何运用HTML5中的各种 结构元素,构建出一个语义清晰,结构分明的Web3.0时代的网站. 案例1:用HTML5中的结构元素构建一个博客网站 疑 ...

  2. 【Linux/Ubuntu学习5】Ubuntu 下android 开发，eclipse不能识别手机

    ubuntu下eclipse不能识别手机解决方法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 1) 在终端运行 lsusb 会发现结果 ...

  3. android基础学习之布局

    我学习android第一步接触的就是布局的学习.布局是androidUI的基础,是重中之重.总的来说android有6种布局,分别是线性布局LinearLayout.相对布局RelativeLayou ...

  4. 如何让oracle的select强制走索

    大多数情况下,oracle数据库内置的查询优化策略还是很成功的,但偶尔也有糊涂的时候,即使有索引,也会做全表扫描,可以参考以下语句的写法,强制让select语句使用索引. (注意:走索引不一定是最优的 ...

  5. Frameset使用教程 小结

    frame,是网页开发必须掌握的知识.例如后台架构.局部刷新,页面分割,都是frame的用途表现,尤其是后台页面制作,使用frame会给用户带来非常舒适的使用感受. frame知识点包括(frames ...

  6. 转： ImageMagick 命令行的图片处理工具(客户端与服务器均可用)

    http://www.imagemagick.com.cn/ 关于ImageMagick ImageMagick (TM) 是一个免费的创建.编辑.合成图片的软件.它可以读取.转换.写入多种格式的图片 ...

  7. asp.net全局记住值

    每个网页都要记住名字和密码! 在Page_Load中写如下代码: Session[“起个名字”]=要赋值的; 在显示的时候写 Response.write(Session[“当时起的名字”.ToStr ...

  8. Windows Phone 8开发环境搭建

    开发Windows Phone需要两个工具:Windows Phone SDK 8.0和Visual Studio集成开发工具.我们购买的Visual Studio Ultimate 2012不包括W ...

  9. C语言知识总结（1）

    C语言中的数据类型 存在疑问,具体参考下面评论 变量的存储 变量实例 ; ; 内存由大到小寻址,优先分配内存地址较大的字节给变量.b的内存地址比a大 每个变量都有地址:第一个字节的地址就是变量的地址 ...

  10. .Net 接连 Oracle 数据库（Winform）

    之前一直是使用Asp.Net 连接 Oracle 10g,最近想写个小程序,所以选择了 Winform.折腾半天后,才发现 Winform 与 Asp.Net 连接 Oracle 是有些许区别的. 区 ...