直接用代码来说明

  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. 《将博客搬至CSDN》 分类: 勉励自己 2014-09-05 14:29 43人阅读 评论(0) 收藏

    搬家啦,上博客园关注我哦http://www.cnblogs.com/AsuraRoute 版权声明:本文为博主原创文章,未经博主允许不得转载.

  2. python之requests-multipart/from-data

    示例代码:files = {"token":(None,token), "key":(None,key), "file":"hel ...

  3. Windows窗口样式速查参考,Delphi窗口控件的风格都有它们来决定(附Delphi何时用到它们,并举例说明)good

    /* 窗口样式参考列表(都是GetWindowLong的GWL_STYLE风格,都是TCreateParams.Sytle的一部分),详细列表如下:https://msdn.microsoft.com ...

  4. quartz 两次执行问题

    最近发现网站(xiayule.net)越写越大,有些东西已经难以维护了,想要添加个功能,都得斟酌半天 项目中有很多可重构的地方,小重构一直进行,大的不敢动,毕竟没有很多时间做测试. 最后,决定精简代码 ...

  5. bzoj1816

    这道题不是很难,二分答案+判定即可 注意在一套牌中Joker只能用一次 ..] of longint;     mid,l,r,n,m,i,ans:longint; function check(x: ...

  6. Scala:(1)变量

    Scala中变量需要注意的地方: (1)val,var val 定义的声明是一个常量,不能改变内容. var定义的声明是一个变量,可以改变其内容 在Scala中,尽可能使用val val answer ...

  7. activiti集成drools实验

    无代码,无真相. 网上的博客代码,都挺片段的.所以,我想找个现成的demo实验代码. 上github ------------------------------------------------- ...

  8. 游戏开发设计模式之子类沙盒模式(unity3d 示例实现)

    积累提供所有操作(的实现)来定义子类的行为用一个最简单的例子来讲解这个模式玩家操纵的英雄也就是这个游戏的主角会有许多技能,我们想定义许多不同的技能,来让玩家使用.首 先我们定义一个skillBase类 ...

  9. MongoDB简单操作

    Hadoop核心技术厂商Cloudera将在2014/06推出hadoop Ecosystem与MongoDB的整合产品,届时MongoDB与ipmala及hbase,hive一起用; 开源linux ...

  10. 西安Uber优步司机奖励政策(1月25日~1月31日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...