简单实现div遮罩

顾名思义，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>

这样通过点击Show和Close按钮可以控制table的可编辑性

posted @ 2015-12-29 11:18  zhchsh  阅读(2417)  评论(0)  编辑  收藏  举报