简单实现div遮罩

最新推荐文章于 2021-05-30 23:03:43 发布

weixin_30339457

最新推荐文章于 2021-05-30 23:03:43 发布

阅读量114

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhchsh/p/5085068.html

版权

顾名思义，div遮罩就是将网页上的一部分用div遮盖起来，防止用户误点，因此div遮罩的一个用途就是将table设置为不可编辑。

作者通过查找资料，并进行简单的测试，最终完成了以下几段简单代码，来实现简单的div遮罩功能

javascript代码

function addDiv(){
            var html = "<div id=\"show\" style=\"position:absolute;\
            background:transparent;display:none;z-index:1001;\"></div>";
            $(document.body).append(html);
        }
        function showdiv(target){
            addDiv();
            var left = $("#" + target).offset().left;
            var top = $("#" + target).offset().top;
            var width = $("#" + target).css('width');
            var height = $("#" + target).css('height');
             
            $("#show").css("display", "block");
            $("#show").css("left", left);
            $("#show").css("top", top);
            $("#show").css("width", width);
            $("#show").css("height", height);
        }
         function hidediv() {
            $("#show").css("display", "none");
         }

对应的网页中的元素为

<body>
    <table id="test">
        <tr>
            <td><input></input></td>
            <td><input></input></td>
        </tr>
        <tr>
            <td><input></input></td>
            <td><input></input></td>
        </tr>
        <tr>
            <td><input></input></td>
            <td><input></input></td>
        </tr>
    </table>
    <div id="bg">
    <input></input>
    </div>
    <div id="gb">
    <input></input>
    </div>
    <input id="btnshow" type="button" value="Show" onclick="showdiv('test');"/>
    <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
</body>