简单实现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的可编辑性
简单实现div遮罩的更多相关文章
- JS+CSS简单实现DIV遮罩层显示隐藏【转藏】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS+CSS简单实现DIV遮罩层显示隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery实现div遮罩层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能
原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...
- div 遮罩层 弹窗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 简单div遮罩
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )
/* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...
- css超简单实现div页面居中【适合做弹出框】
1.前言 现在项目中用到弹出框的话大部分都是直接用控件的.不过有控件虽方便,但有时候会有冲突的地方.我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋 ...
- 简单的ajax遮罩层(加载进度圈)cvi_busy_lib.js
cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...
随机推荐
- wamp环境PHP安装mongodb扩展
特别注意 :本地的下载的mongo 为线性TS *86 而不是64 按照apache的版本来定.
- 脚本放在 <body> 元素的底部
建议把脚本放在 <body> 元素的底部. 这会提高网页加载速度,因为 HTML 加载不受制于脚本加载.
- Linux学习笔记<四>
<1>shutdown -h now 立刻进行关机 shutdown -r now/reboor 现在重新启动计算机 <2>尽量避免用root用户登陆,用普通用户登陆后换成ro ...
- GoLang之基础
GoLang之基础 Go是一种并发的.带垃圾回收的.快速编译的语言. 经典的"hello world"入门: package main import "fmt" ...
- Samus驱动中的Document条件
今天要说一个东西就是Samus驱动里的 Document 和他的一个子类 Op 在Samus驱动的增删改查方法中都有这类的参数传递.. 大致的使用方法是这样.. MongoU.Find<Per ...
- python 选择排序
选择排序算法的思想,首先第一次先从整个序列中选择最小的数,然后放到第一位,然后再从第二位到最后一位选择出最小的一个数,把这个数放到第二位,然后,再从第三位到最后一位选择其中最小的数放到第三位,这样一直 ...
- python sys os hashlib_MD5 模块
模块 内置模块是Python自带的功能,在使用内置模块相应的功能时,需要[先导入]再[使用] 一.sys 用于提供对Python解释器相关的操作: ? 1 2 3 4 5 6 7 8 9 sys.ar ...
- cas单点登录 SSO 的实现原理
原文出处: cutesource 欢迎分享原创到伯乐头条 单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户 ...
- Spring回调方法DisposableBean接口
除了自定义的destroy-method.还可以实现DisposableBean接口,来回调bean销毁时候执行的方法,这个接口有一个destroy方法,生命周期是是destroy----bean销毁 ...
- android控件库(1)-带删除功能的EditText
DJEditText.java /** * Created by xp.chen on 2016/11/25. */ public class DJEditText extends AppCompat ...