直接用代码来说明

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskTest.aspx.cs" Inherits="Test07.MaskTest" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.     <title></title>
  9. </head>
  10. <body>
  11.     <form id="form1" runat="server">
  12.         <div id="countdivmaks" style="position: relative">
  13.             在一个层上添加一个遮罩层的实现:<br />
  14.             实现原理：就是在要添加遮罩层的层上里面添加一个层，让该层撑满整个层即可<br />
  15.             具体实现要求说明：在要添加遮罩层的位置必须是相对的位置：psotion:relative<br />
  16.             遮罩层的位置必须是绝对的：postion：aasolute;width:%;heigth:%;top:0px;left:0px;
  17.  
  18.         </div>
  19.         <div>
  20.             <input type="button" id="but1" value="添加遮罩层" />
  21.         </div>
  22.     </form>
  23. </body>
  24. </html>
  25. <script src="jquery-1.7.1.min.js"></script>
  26. <script type="text/javascript">
  27.     var hasAdd = false;
  28.     $("#but1").click(function () {
  29.         if (!hasAdd) {
  30.             hasAdd = true;
  31.             var maskdiv = '<div id="divmask" style="position:absolute;width:100%;height:100%;background-color:black;opacity: 0.5;top: 0px;left:0px;"></div>';
  32.             $("#countdivmaks").append(maskdiv);
  33.             $(this).val("去掉遮罩层");
  34.         } else {
  35.             hasAdd = false;
  36.             $("#divmask").remove("div");
  37.             $(this).val("添加遮罩层");
  38.         }
  39.     });
  40. </script>

js添加遮罩层的更多相关文章

  1. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  2. 纯js制作遮罩层对话框 -- g皓皓

    //本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  3. bootstrap添加遮罩层loadingmask

    转自:https://blog.csdn.net/baidu_30809315/article/details/83900255 gif动态图下载地址:http://blog.sina.com.cn/ ...

  4. 前端小结（3）---- 添加遮罩层，并弹出div

    有如下div: <div id='pop-div' class="pop-box"> <div class="input-group has-info& ...

  5. js 带遮罩层的弹出层

    最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...

  6. js特效遮罩层（弹出层）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. JS实现遮罩层

    /* * 显示loading遮罩层 */ function loading() { var mask_bg = document.createElement("div"); mas ...

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

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

  9. 有时在UIWindow上添加遮罩层不成功的原因

    程序启动后,初始化window,初始化controller,加载试图,这三个方法的顺序是嵌套的 类似于: - (id) initWindow {[self initController];} 而我在i ...

随机推荐

  1. JSP特点

    建立在servlet规范功能之上的动态网页技术. JSP文件在用户第一次请求时,会被编译成servlet,然后由servlet处理用户的请求.所以JSP可以看成运行时servlet. 1).将内容的生 ...

  2. spring- properties 读取的五种方式

    转至:http://www.cnblogs.com/hafiz/p/5876243.html 方式1.通过context:property-placeholder加载配置文件jdbc.properti ...

  3. ASP.NET MVC 学习

    项目结构

  4. poj 2778 DNA Sequence AC自动机

    DNA Sequence Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 11860   Accepted: 4527 Des ...

  5. <jsp:forward>、requestDispatcher和sendRedirect()的区别

    1.会话信息保存在服务器内存上,可以断续访问,和cookie相比,其保存在服务器上. 2.男人就像蓝牙:只有在你接近时,他才会找上你.当你离开后,他便又去找其他的"设备"了.女人就 ...

  6. nodejs注册为windows服务

    http://blog.csdn.net/puncha/article/details/9047311 http://www.oschina.net/question/12_18694 http:// ...

  7. 大数据计算新贵Spark在腾讯雅虎优酷成功应用解析

    http://www.csdn.net/article/2014-06-05/2820089 摘要:MapReduce在实时查询和迭代计算上仍有较大的不足,目前,Spark由于其可伸缩.基于内存计算等 ...

  8. MyEclipse6.5安装SVN插件的三种方法z

    一.安装方法: 方法一.如果可以上网可在线安装   . 打开Myeclipse,在菜单栏中选择Help→Software Updates→Find and Install;   . 选择Search ...

  9. 启动tomcat的 startup.bat屏幕一闪而过

    有时启动tomcat 时,屏幕一闪而过,看不到是那里有问题.要想让屏幕停下来,做法如下: 1.打开 startup.bat 文件,在文件最后加上最后加一行@pause 2.重新运行 startup.b ...

  10. 如何实现View上添加标签

    效果图: 利用 https://github.com/linger1216/labelview 类库来实现 具体代码 问度娘. {LabelView label = new LabelView(thi ...