顾名思义，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. Wavefront OBJ 转换成OpenGL ES使用的C/C++文件

    项目需要展示3D max模型,通过调研

  2. sql 编写横竖表转换

    将横表转为竖表,基本思想是: 1)将横表的多条数据,"压"成一条.相当于将这么多条分组,每组"压"成一条数据.利用group by 2) 再对竖表中的列,由特定 ...

  3. boolean 和 Boolean 类型数据的差别

    工作中遇到页面传递布尔类型的数据问题,需要在代码中判断不能为null,就此思考一下,boolean和Boolean之间的区别?boolean是基本数据类型Boolean是它的封装类,和其他类一样,有属 ...

  4. Oracle连接查询

    一.内连接和外连接    内连接用于返回满足连接条件的记录:而外连接则是内连接的扩展,它不仅会满足连接条件的记录,而且还会返回不满足连接条件的记录,语法如下: select table1.column ...

  5. SMTP邮箱验证错误解决

    开始报错,是因为权限设置问题,谷歌对第三方应用登录默认关闭,需要开通后python才能自动访问邮件 SMTPAuthenticationError: (502, b'5.5.1 Unrecognize ...

  6. JavaScript学习笔记——对象分类

    对象的分类 一.对象的分类 1.内置对象 Global Math 2.本地对象 Array Number String Boolean Function RegExp 3.宿主对象 DOM BOM 二 ...

  7. 为什么可以用while(cin)?

    为什么可以用while(cin)?   /** * @brief The quick-and-easy status check. * * This allows you to write const ...

  8. VS编译器从DLL导出模板类

    DLL与模板 http://msdn.microsoft.com/en-us/library/twa2aw10.aspx http://www.codesynthesis.com/~boris/blo ...

  9. json_encode

    html文件 <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  10. servlet生命周期与工作原理

    →   Jsp的本质是Servlet,Servlet是服务器端的小程序,运行在服务器,用于处理及响应客户端的请求. Servlet和JSP的区别: servlet是特殊的Java类,必须继承HttpS ...