直接用代码来说明

<%@ 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. MAC 安装Ruby On Rails

    MAC 安装Ruby On Rails 对于新入门的开发者,如何安装 Ruby, Ruby Gems 和 Rails 的运行环境可能会是个问题,本页主要介绍如何用一条靠谱的路子快速安装 Ruby 开发 ...

  2. 正则表达式替换img标签src值！！！

    方法一: 相关链接:http://bbs.csdn.net/topics/320185735 实例:此实例自己做的时候讲字符串加了alt进行了有关修改  不清楚看上面链接 string test = ...

  3. C51应用 Modbs Rtu协议实现与KEPServerEx 通信

    最近一客户要求使用STC12C5A60S2实现Modbus Rtu协议与KEPServerEx V4.0软件通信,采集单片机P2口每位的状态,设置P0口每位的状态,实现三路AD转换其中一路采集的是C0 ...

  4. Hadoop 学习笔记 （十一） MapReduce 求平均成绩

    china:张三 78李四 89王五 96赵六 67english张三 80李四 82王五    84赵六 86math张三 88李四 99王五 66赵六 77 import java.io.IOEx ...

  5. DBA - 我的学习

    DBA - 我的学习 1. df -k 检查oracle 分区硬盘使用情况 2. 检查alert_<SID名称>.log, alert日志文件,检查是否新增错误日志 3. 检查数据文件的状 ...

  6. 《Zero to One》的一些读书笔记

    第一章<The Challenge of the Future>:全球化是横向的扩张,只能复制以前就有的成功,而科技创新是纵向的扩张,是创造以前不存在的东西.没有科技创新,只有全球化,这个 ...

  7. C语言中.h和.c文件解析

    整理自C语言中.h和.c文件解析(很精彩) Part.1(林锐<高质量C/C++编程>) 通过头文件来调用库功能.在很多场合,源代码不便(或不准)向用户公布,只要向用户提供头文件和二进制的 ...

  8. php使用domdocument读取xml文件

    使用domdocument读取xml文件需要用到以下几个方法和属性: 方法: 1:读取xml文件:load() 2:获取标签的对象数组:getElementByTagName() 3:对象数组的索引: ...

  9. 大整数相乘的C实现

    //之前有个测试这个题没做完,现在把它做完,通过这个程序可以对乘法了解更深刻.分析:运用整数乘法,当然进制越高越好,考虑到乘法不要越界,故考虑进制底数N应该满 //足,N^2<2^32次方.所以 ...

  10. 如何快速使用ECharts绘制可视化图表

    1.在ECharts官网,下载ECharts的源码和示例文件. 2.解压缩下载下来的Echars压缩包,找到doc\example\www\echartsjs目录,将里面的js文件全部取出来,放到项目 ...