顾名思义，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. Ajax 简述

    说到Ajax大家一定不陌生,但是真要具体说说它是什么?估计给出完整定义的人应该不多. W3C上给Ajax的具体定义为: AJAX = Asynchronous JavaScript and XML(异 ...

  2. jQuery Ajax(异步请求)

    jQuery异步请求 原始的异步请求是需要创建的 XMLHttpRequest 对象.(IE5,6不支持)目前很多浏览器都支持XMLHttpRequest对象 jQuery ajax常用的回调函数:b ...

  3. asp.net中的窗口弹出实现，包括分支窗口 . ASP.NET返回上一页面实现方法总结 .

    返回上一页的这个东东在我们做项目的时候一般是用于填写完表单后确认的时候,有对原来输入的数据进行修改或者更新时用的,或者是因为网站为了方便浏览者而有心添加的一个东东,一般这种功能的实现在ASP.NET中 ...

  4. python 读取 redis -安装redis-py

    先下载  https://github.com/andymccurdy/redis-py 到本地 然后打开 Cmd.exe 进入当前目录 后执行 执行成功后,在python里检测 没有任何错误提示 就 ...

  5. 日志分析 第七章 安装grafana

    grafana依赖mysql存储数据,首先需要安装mysql 安装mysql 解压 # groupadd mysql # useradd -s /sbin/nologin -g mysql mysql ...

  6. listen()

    创建一个套接口并监听申请的连接. #include <winsock.h> int PASCAL FAR listen( SOCKET s, int backlog); S:用于标识一个已 ...

  7. Nginx+PHP-fpm高负载优化及压力测试方法

    Nginx+PHP-fpm组合,以内存占用小,负载能力强壮的特点,成为小内存VPS建站的首选组合.我们一起来探讨一下nginx+php-fpm高负载的优化方法. 先来看看nginx配置参数的优化.ng ...

  8. asp+mysql__不同类型用户登录

    未防注入//0.0 /***这里代码应用场景为多类用户登录,根据用户选择不同的单选按钮判断用户登录的类型,*从而进行不同的数据表进行判断,用户的用户名和密码是否正确.*/ public partial ...

  9. BuildingAssetBundles in 5.x

    http://docs.unity3d.com/Manual/BuildingAssetBundles5x.html

  10. PetaPoco 使用总结(二)

    接着上一篇,上一篇主要介绍了PetaPoco 基本情况,优缺点和基本的查询功能,所以这篇主要介绍的是PetaPoco 的增,删,改等功能.PetaPoco提供了完整的增,删,改,查功能.是代替SqlH ...