js添加遮罩层

最新推荐文章于 2021-05-25 00:43:38 发布

长江黄河

最新推荐文章于 2021-05-25 00:43:38 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/oChangJiangHuangHe/article/details/102982749

版权

直接用代码来说明

<%@ 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
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js添加遮罩层

直接用代码来说明<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskTest.aspx.cs" Inherits="Test07.MaskTest" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtm...
复制链接

扫一扫