js添加遮罩层

直接用代码来说明

<%@ 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:100%;heigth:100%;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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于表单重复提交问题

    问题引入:当我们在做一个页面数据提交的时候,当我们连续点击提交按钮,因为快速连续点击,因为速度过快,页面还来不及反应,导致页面从复提交。。

    小小许
  • .net导出excle无需任何插件,直接通过一个tablehtml实现

      本次主要说的第3中实现方式,这样实现起来很方便,尤其是针对样式复杂的表格,就当写html一样可以实现复杂的显示逻辑

    小小许
  • js监听用户的键盘敲击事件,兼容各大主流浏览器

    小小许
  • AdminLTE实现局部刷新

    AdminLTE是一个基于boostrap的前端模板,里面集成了好多插件,可以说方便又臃肿,毕竟不是所有插件都用得到,。好不容易找到个喜欢的前端模板,无奈每次点...

    汐楓
  • ECMAScript 6入门 - 变量的解构赋值

    定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 解构赋值不仅适用于var命令,也适用于let和...

    laixiangran
  • 接口测试 | 25 requests + pytest测试实例

    概述 本文主要分享如何将pytest和requests结合一起使用,让大家有个初步的了解。 主要内容有: pytest简介 pytest + requests示...

    苦叶子
  • 接口测试 | 25 requests + pytest测试实例

    概述 本文主要分享如何将pytest和requests结合一起使用,让大家有个初步的了解。 主要内容有: pytest简介 pytest + requests示...

    苦叶子
  • ECMAScript 6笔记(let,const 和 变量的解构赋值)

    版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

    空空云
  • ECMAScript 6之变量的解构赋值

    1,数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 以前,为变量赋值,只能...

    xiangzhihong
  • 分析3000份技术面试数据:这几大指标比你毕业于哪所学校更要紧

    大数据文摘

扫码关注云+社区

领取腾讯云代金券