顾名思义，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的可编辑性

简单实现div遮罩的更多相关文章

  1. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JS+CSS简单实现DIV遮罩层显示隐藏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jquery实现div遮罩层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

    原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...

  5. div 遮罩层 弹窗

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 简单div遮罩

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  8. css超简单实现div页面居中【适合做弹出框】

    1.前言 现在项目中用到弹出框的话大部分都是直接用控件的.不过有控件虽方便,但有时候会有冲突的地方.我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋 ...

  9. 简单的ajax遮罩层（加载进度圈）cvi_busy_lib.js

    cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...

随机推荐

  1. [COCI2012Final]Pro1

    校内OJ上的题. 数据范围非常小,用暴搜就可以,加点剪枝阶乘级别的复杂度竟然可以跑得比$O(N^4)$的算法还要快QAQ. 我用的是Floyd,参考了别人的代码.大概就是先跑个Floyd把点点之间路径 ...

  2. Nginx系列2之Nginx+php

    preface 公司所有的大多数业务都泡在LNMP平台上,所以对PHP+Nginx有点了解,那么就做个小小的总结吧. what's FastCGi FastCGI是一个可伸缩,高速的在HTTP ser ...

  3. 卸载自己编译的程序（ubuntu14.04）

    cd 源代码目录make clean./configuremake uninstall

  4. ionic的scroll的使用出现的问题

    今天再写ionic的时候发现了一个问题,在使用ui-view的时候引用ion-scroll指令的时候初次加载的时候能能实现拖拽滚动,只能实现滚动鼠标滚轴滚动,然后各种调试,各种比较,终于发现原来是路由 ...

  5. IOS OC 计算器算法(不考虑优先级)

    个人见解:为还在计算器算法方面迷惑的同学一个数据处理解决方案:定义一个可变数组array,一个可变字符串str,使字符通过[array addObject:str];方法添加到可变数组,每当触发运算符 ...

  6. Navicat 的使用（二）

    一,navicat如何写sql语句查询? 方法1:ctrl+q就会弹出一个sql输入窗口,就可以在里面写sql了.写完sql后,直接ctrl+r就执行sql了. 还有一点,写sql语句时,navica ...

  7. wpf的毛边窗体效果 前台代码

    <Window x:Class="wpfwindowsmove.毛边窗体"        xmlns="http://schemas.microsoft.com/w ...

  8. paramiko模块使用

    paramiko是一个用于做远程控制的模块,使用该模块可以对远程服务器进行命令或文件操作,fabric和ansible内部远程管理就是使用paramiko来实现. #!/usr/bin/env pyt ...

  9. mysql循环获取结果集

    do { MYSQL_RES* res = mysql_store_result(con); ) { MYSQL_ROW row; if (row = mysql_fetch_row(res)) { ...

  10. Linux下htop的使用

    linux top命令VIRT,RES,SHR,DATA的含义 第1行-第4行:显示CPU当前的运行负载,有几核就有几行,我的是4核 Mem:显示内存的使用情况,3887M大概是3.8G,此时的Mem ...