直接用代码来说明

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskTest.aspx.cs" Inherits="Test07.MaskTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

        <div id="countdivmaks" style="position: relative">

            在一个层上添加一个遮罩层的实现:<br />

            实现原理：就是在要添加遮罩层的层上里面添加一个层，让该层撑满整个层即可<br />

            具体实现要求说明：在要添加遮罩层的位置必须是相对的位置：psotion:relative<br />

            遮罩层的位置必须是绝对的：postion：aasolute;width:%;heigth:%;top:0px;left:0px;

        </div>

        <div>

            <input type="button" id="but1" value="添加遮罩层" />

        </div>

    </form>

</body>

</html>

<script src="jquery-1.7.1.min.js"></script>

<script type="text/javascript">

    var hasAdd = false;

    $("#but1").click(function () {

        if (!hasAdd) {

            hasAdd = true;

            var maskdiv = '<div id="divmask" style="position:absolute;width:100%;height:100%;background-color:black;opacity: 0.5;top: 0px;left:0px;"></div>';

            $("#countdivmaks").append(maskdiv);

            $(this).val("去掉遮罩层");

        } else {

            hasAdd = false;

            $("#divmask").remove("div");

            $(this).val("添加遮罩层");

        }

    });

</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. AlertDialog中EditText不能获取焦点以及不宽度不能自动铺满的完美解决方案

    问题分析: 因为 dialog的Attributes使用的默认的,其中一个属性就是:flags ,就是这个属性导致不能获取焦点,默认的是FLAG_NOT_FOCUSABLE,故名思义不能获取输入焦点, ...

  2. ASP.NET MVC轻教程 Step By Step 11——数据注解

    将验证规则写在Cotroller里不是一个好办法,这样会显得代码很啰嗦,更重要的是将业务逻辑写入Controller,使得Controller变得更“重”,不符合设计原则.更好的办法是使用验证注解属性 ...

  3. 小A老空调需求管理小记

    1. 关注一个动作的流程和内容 比如登录,我需要提供的是登录接口,但是登录是否只是一个动作?一个动作一定不完整,还应该包括动作的内容和步骤(流程),这里有两个问题:就是落地和把问题想复杂了:其实登录还 ...

  4. BZOJ 3680 吊打XXX

    Description gty又虐了一场比赛,被虐的蒟蒻们决定吊打gty.gty见大势不好机智的分出了n个分身,但还是被人多势众的蒟蒻抓住了.蒟蒻们将n个gty吊在n根绳子上,每根绳子穿过天台的一个洞 ...

  5. Android的系统架构

    转自Android的系统架构 从上图中可以看出,Android系统架构为四层结构,从上层到下层分别是应用程序层.应用程序框架层.系统运行库层以及Linux内核层,分别介绍如下:     1)应用程序层 ...

  6. iOS9 App Thinning(应用瘦身)功能介绍

    iOS9 发布后,产生了一个使 App Thinning 无法正常运行的 bug.在iOS9.0.2 版本中,这个 bug 已经被修复,App Thinning 已经可以正常使用.当你从应用商店(Ap ...

  7. Delphi实现HTMLWebBrowser实现HTML界面

    HTML的界面有以下特点:图文混排,格式灵活,可以包含Flash.声音和视频等,实现图文声像的多媒体界面,而且易于建立和维护.另外,HTML的显示环境一般机器上都具备,通常不需要安装额外的软件.当然, ...

  8. 如何在jasperreport自动生成序号

    在导出报表时,有时候我们需要显示序号,有两种方法: 1.就是再加一个字段,就是说将序号也当做是要导出的字段来处理,然后用程序给这个字段赋值,这方面有点傻,就不说了. 2.利用jasperreport提 ...

  9. 利用no_merge优化

    SQL> select a.unit3_code 机构编码, 2 a.unit3_name 机构名称, 3 a.dept1_code 部门编码, 4 a.dept1_name 部门名称, 5 a ...

  10. 【HDOJ】3397 Sequence operation

    线段树的应用,很不错的一道题目.结点属性包括:(1)n1:1的个数:(2)c1:连续1的最大个数:(3)c0:连续0的最大个数:(4)lc1/lc0:从区间左边开始,连续1/0的最大个数:(5)rc1 ...