zoukankan      html  css  js  c++  java
  • 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;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;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>
  • 相关阅读:
    微信朋友圈分享链接的【图片】设置
    Apache无法访问 Forbidden
    Chrome不能登录和同步的解决方法
    为js和css文件自动添加版本号
    Sqlserver替换函数Replace
    javascript 回车提交指定按钮
    ★★★.NET 在meta标签中使用表达式设置页面的关键字
    es6对象扩展
    es6数组新方法
    es6 字符串
  • 原文地址:https://www.cnblogs.com/xiaoXuZhi/p/3229109.html
Copyright © 2011-2022 走看看