div屏蔽table使其不能操作，（或弹出框灰显父页面）

最新推荐文章于 2023-08-24 10:58:49 发布
最新推荐文章于 2023-08-24 10:58:49 发布
阅读量2k 收藏
点赞数
分类专栏： DIV 文章标签： div table dialog function button border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinyuxiaoxiao5460/article/details/6030113
版权

<html>

<head>

    <title>半透明div</title>

 

 

   <style>

.#mask {

visibility: hidden;

background-color: #cccccc;

left: 0px;

position: absolute;

top: 0px;

background-image: none;

filter: alpha(opacity :   50);

}

 

.#dialog {

visibility: hidden;

background-color: #f7fcfe;

z-index: 100;

width: 300px;

height: 50px;

position: absolute;

text-align: center;

font-size: 30px;

color: #FF0000;

font-weight: bold;

vertical-align: middle;

}

</style>

 

 

 

<script language="javaScript">

function show()

{

    var d_mask=document.getElementById('mask');

    var d_dialog = document.getElementById('dialog');

 

    d_mask.style.width = document.getElementById('ok').clientWidth ;

    d_mask.style.height=document.getElementById('ok').clientHeight;

d_mask.style.left = document.getElementById('ok').offsetLeft;

    d_mask.style.top=document.getElementById('ok').offsetTop;

    //网页正文全文

    //d_mask.style.width = document.body.scrollWidth ;

    //d_mask.style.height=document.body.scrollHeight;

 

    d_dialog.style.top = document.getElementById("ok").clientHeight / 2 - 60;

    d_dialog.style.left =document.getElementById("ok").clientWidth / 2 -100;

 

    d_mask.style.visibility='visible';

    d_dialog.style.visibility='visible';

 

}

 

 

function divBlock_event_mousedown()

{

var e, obj, temp;

obj=document.getElementById('dialog');

e=window.event?window.event:e;

obj.startX=e.clientX-obj.offsetLeft;

obj.startY=e.clientY-obj.offsetTop;

document.οnmοusemοve=document_event_mousemove;

temp=document.attachEvent?document.attachEvent('onmouseup',document_event_mouseup):document.addEventListener('mouseup',document_event_mouseup,'');

}

 

 

function document_event_mousemove(e)

{

var e, obj;

obj=document.getElementById('dialog');

e=window.event?window.event:e;

with(obj.style){

    position='absolute';

    left=e.clientX-obj.startX+'px';

    top=e.clientY-obj.startY+'px';

    }

}

 

function document_event_mouseup(e)

{

var temp;

document.οnmοusemοve='';

temp=document.detachEvent?document.detachEvent('onmouseup',document_event_mouseup):document.removeEventListener('mouseup',document_event_mouseup,'');

}

 

 

window.onresize = function()

{

    var d_mask=document.getElementById('mask');

    var d_dialog = document.getElementById('dialog');

 

 

    d_mask.style.width = document.getElementById('ok').clientWidth ;

    d_mask.style.height=document.getElementById('ok').clientHeight;

d_mask.style.left = document.getElementById('ok').getBoundingClientRect().left ;

    d_mask.style.top=document.getElementById('ok').getBoundingClientRect().top;

}

</script>

</head>

<div id ="mask"></div>

<div id ="dialog" οnmοusedοwn="divBlock_event_mousedown()">处理中，请等待……</div>

<body>

    <table id="ok1" border='0' width="100%" height="100%">

        <tr>

            <td>

                测试

            </td>

        </tr>

        <tr>

           <td>

              <input type="button" value="显示div" οnclick="show()" />

           </td>

        </tr>

    </table>

<table id="ok" border='0' width="100%" height="100%">

        <tr>

            <td>

                测试

            </td>

        </tr>

        <tr>

           <td>

              <input type="button" value="显示div" οnclick="show()" />

           </td>

        </tr>

    </table>

</body>

</html> 

 

xinyuxiaoxiao5460
关注
专栏目录
纯css实现警示框页面（带关闭窗口按钮）
weixin_30832405的博客
12-28 329
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>nopermission</title> <style> h3{margin:0;padding: 0;} a{text-decora...
弹出层（Div）屏蔽父窗口并且让父窗口变暗
yongbuyanqi88888的专栏
04-16 777
html> head>     script>     function   locking(){     document.all.ly.style.display="block";     document.all.ly.style.width=document.body.clientWidth;     document.all.ly.style.height=d
jsp页面制作弹出框
weixin_33859231的博客
12-08 1651
各种弹出页面的设计 【1、普通的弹出窗口】其实代码非常简单： <SCRIPTLANGUAGE=javascript><!--window.open('page.html')--></SCRIPT> 　　因为这是一段javascript代码，所以它们应该放在<SCRIPTLANGUAGE=javascript>标签和...
关于layer.open()弹出页面与”父页面“之间获取数据赋值给页面Element的问题
m0_46448915的博客
11-12 8841
文章目录前言一、layer.open()的使用1.概念2.主要参数二、弹出页面与”父页面“之间获取Element数据并赋值1.需求2.实现代码1、前期准备**2、所有代码**三、最后 前言 最近在做一个超市管理系统的作业，我也是用到了layUI组件库，使用表格时，也是被编辑表格功能给搞的"心累"。官方给的编辑表格是直接点击（双击）表格某格就可以直接编辑表格。但我想实现的是，用户点击表格右侧”编辑”工具栏就弹出一个“子页面”，在子页面上编辑对应的表格某行数据，并更新表格数据。当然这里我没有写数据库相关接口
jsp页面的弹出框
hzp666的博客
03-01 9163
http://blog.csdn.net/zjilcx/article/details/7332740
页面请求加载框，并屏蔽页面点击
qq_38669394的博客
06-19 973
1.最近项目的页面一直出现 重复点击的问题，因为时间原因，后台也没有做防止重复点击措施，就想着在页面控制吧，加了一个页面加载框，点击提交时，禁止点击页面。 在网上找到的。具体效果如下 2. 看一下网上素材的文件排版 3，我就先贴出css 和 js 两个css文件 global.css 是在线演示全局样式的css 在项目中可以不用引用。loading.css也要注意对项目的影响,因为是网上找到，可能有css冗余 3.1 global.css @charset "UTF-8";ht..
div弹出框定位问题，超级难！
weixin_30379973的博客
10-27 1463
项目中一个gridview，点击一行弹出一个div层，把该条的信息都显示在层中，然后点击保存，更新gridview。 现在我遇到了一个问题，就是点击一行时，div层就在该层下显示。问题就出来了，我根本不能定位到这个div的top和left。因为我没有办法取得我点击行的top和left值。在winform里面好做，可是asp.net就不知道了。 1 虽然也可以用这个 this.popUp...
弹出层（Div）屏蔽父窗口并且让父窗口变暗 .
guohongwei12的博客
11-08 406
01. 02. 03. 17. 18. 19. 20. 21. 22. 23. 24. 26. 27. 28. 30. 33. 34. 37. ...
javascript弹出层输入框(示例代码)
10-26
在Web开发中，弹出层输入框是一种常见的交互方式，它允许用户在不离开当前页面的情况下，输入一些必要的信息。这篇文章主要向读者介绍了一个使用JavaScript实现的弹出层输入框功能的示例代码。通过这个示例，开发者...
Vue3 - 超详细自定义浏览器右键菜单功能，在指定容器元素上屏蔽浏览器右键并弹出自定义的右键菜单功能（支持在 “任意容器“ 内弹出、自动计算弹出位置、可多级菜单、禁用菜单等功能）
王佳斌
08-24 2860
vue3右键菜单，vue3自定义右键菜单，vue3实现自定义右键菜单，vue3实现屏蔽浏览器右键弹出自定义菜单，vue3鼠标右键自定义菜单插件组件，vue3中如何自定义右键菜单详解，vue3添加自定义右键菜单，vue3如何做自定义右键菜单的完整实例代码，vue3网页网站h5项目屏蔽浏览器右键且弹出自己的菜单，vue3右键菜单插件，vue3页面把右键菜单屏蔽用自己的组件菜单，vue3点击右键出现自定义操作菜单，vue3单击鼠标右键显示自定义下拉菜单，vue3.x框架中怎么实现右键菜单的效果，vue3实现自定义
tinymce引入后未显示_tinyMCE使用方法与心得详解
weixin_29577659的博客
01-30 4403
tinyMCE使用详解初始化在初始化TinyMCE的时候，需要把以下代码加入到页面的HEAD标签中。按以下例子中的设置，所有的TEXTAREA文本域在页面加载时将被转换成编辑器。另外还有其他模块，我们将在后面详细讲述。复制代码代码如下:tinyMCE.init({mode : "textareas"});注意以上红色部分是tiny_mce.js脚本文件的位置，该文件中包含了编辑器所需要的全部代码，...
解决如何让两个div在一行上的问题
09-17 1758
<br />方法一，如果两个div都不知道width的话， 前一个float:left, 后一个不管最后用一个clear的div就搞定了，但是两个div的位置会重合 ，内容不会重合<br /><div style=”position:absolute;left:200px;height:1000px;width:300px;display:inline;”><br /><div style=”float:left;position:relative;width:100px;background:#99002
鼠标移上去弹出div
10-15 1456
<br /><script language=javascript> <br /><!-- <br />var IE5=(document.getElementById && document.all)? true : false;<br />var W3C=(document.getElementById)? true: false;<br />var currID=null, preID=null; xoff=0, yoff=0; zctr=0; totz=0;<br />function trackm
div层被select下拉框遮盖
11-23 494
<br /><br />经测试解决代码仅在IE浏览器有效。<br />由于层与下拉框之间的优先级是：下拉框 > 层，因此在显示的时候，会因为优先级的次序而会出现div层被select下拉框遮盖的问题。（如果几个元素都是层的话，我们可以通过层的 z-index 属性来设置）解决办法就是：给层中放一个优先级比下拉框更高的元素（iframe），从而解决此问题！具体解决代码如下：<br /><br /><div style="position:absolute; visibility:hidden; top
实现Div层里的文字垂直居中的方法
11-15 262
  有时候，为了网页设计的美观，需要把div+css设计的页面里的某些div层里的文字垂直居中，包括多行文字以及单行文字；方法有不少，但真正能实现而代码又简洁的介绍不多，flymorn就为大家介绍几种适用的div文字垂直居中的方法。 <br />     首先要知道css里vertical-align无效，W3C官方对vertical-align做了下面的解释： “ This property affects the vertical positioning inside a line box of th
5253-微信小程序基于springboot汽车维修管理系统微信小程序springboot（源码+数据库+lun文）.zip
最新发布
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
基于Matlab界面GUI设计的身份证号码识别源码[Matlab界面GUI设计].zip
09-15
基于
Bootstrap实现弹出框与提示框效果详解
在Web开发中，弹出框和提示框是不可或缺的元素，尤其在处理表格数据的新增和编辑操作时。通过弹出框可以提供更好的用户体验，避免页面混乱，并保持用户的焦点集中在当前任务上。Bootstrap不仅提供了基础的样式支持，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值