js把div置灰不可用

最新推荐文章于 2023-07-26 15:25:10 发布
最新推荐文章于 2023-07-26 15:25:10 发布
阅读量3.8w 收藏 2
点赞数
分类专栏： js html
js 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
html
9 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层背景灰色不可编辑</title>
<script type="text/javascript">
//弹出层背景灰色
function locking(objDiv){
document.getElementById('ly').style.display="block";
document.getElementById(objDiv).style.display='block';
scroll(0,0);
}
//隐藏层
function hiddenDiv(objVar)
{
document.getElementById(objVar).style.display="none";
document.getElementById('ly').style.display='none';
}
</script>
</head>

<body>

<input type="button" οnclick="locking('apDiv2')" value="弹出"/>

<!--弹出内容层 -->
<div id="apDiv2" style="display:none;position: fixed; z-index: 3;height:auto; padding:20px;width:auto;top:20%;left:25%;border:2px solid #a2d2d2;background-color:#fff; " >

<input type="button" οnclick="hiddenDiv('apDiv2')" value="关闭"/>
</div>
<!--灰色背景层-->
<div id="ly" style="position:fixed; top:0; left:0; z-index:2; width:100%; height:100%; background:#f5f5f5; filter:alpha(opacity=70); opacity:0.7;display: none;">
</div>
</body>
</html>

下雨了620
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
01-21
当需要实现如下图操作，点击服务评分，出现一个服务评分窗口用来填入相关表单信息   可是这会让我们打开服务评分界面时还可以点击body主界面中的购物车等链接，这是不对的，因此我们可以使用层叠样式表来指定外围的div的z-index低于当前服务评分表单页面，不能被点击，如下: /* 定义一个div用于覆盖整个页面，这个div的z-index大于body，小于服务评分div */ #temp{ background-color: #000; opacity: 0.3; width: 100%; height: 100%; z-index: 2; visibility: hi
div灰度不可用
weixin_33698043的博客
05-18 348
<footer id="footer" class="footer"> <div id="toSearch"></div></footer>以下是灰度不可用的css，js.GrayBtn{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:gray...
DIV+JS弹出层并置灰窗口为不可点击状态
04-12
NULL 博文链接：https://empirel.iteye.com/blog/1386570
DIV遮蔽背景显示层,背景为灰色并不可编辑
02-24
很好用的一个功能,可以随意在弹出的层上显示需要提醒的内容,并以可以定义用户关闭这个层后需要跳转的页面!调用的方法如下,如下的代码的意思是:弹出提示"帐号激活成功..."的对话框后,关闭层将跳转到default.aspx页面，如果不想跳转的话，将default.aspx赋值为#就可以了;/ Page.RegisterStartupScript("myscript", "window.onload=function(){sAlert('帐号激活成功，系统奖励您" + MarkFromValue.value_1 + "积分！','Default.aspx');}");
div 不可点击设置
一拳莫敌的博客
09-28 1524
【代码】div 不可点击。
css div li等等设置disabled属性实现置灰效果
wnk1997的博客
11-03 7040
默认情况下，div这种是没有disabled属性，没有不能点击的效果的，所以需要换个思路，增加disabled样式，如果生效的话置灰。同时要设置onClick方法，如果置灰的时候返回。
网站置灰的几种方式
L_TZzzz的博客
12-02 1187
网站置灰的几种方式
前端页面添加灰色滤镜,使网页整体变灰
weixin_46995731的博客
11-26 2906
前端页面添加灰色滤镜,使网页整体变灰 只需要在html的样式里面加一句代码 html,body,div,img{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url("data:image/svg+x
div禁用，不可点击，不可编辑
weixin_45767321的博客
12-14 6100
div禁用——添加样式style={pointer-events: none;} 1、根据当前项目的场景，在特定条件下时，该div禁用，不可点击，先在HTML内给此标签新加一个类名 2、写好不可点击的样式 3、在特定逻辑下，加入新类名 $(".原类名").addClass("新类名");     ...
DIV 灰色透明遮罩层，显示，隐藏
ASP.NET
09-13 8981
position: fixed; z-index: 99; display: none;filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;">
js弹出可移动可关闭浮动窗口并灰化背景
04-01
js弹出可移动可关闭浮动窗口并灰化背景
div+js+css模拟select并且把无效的select选项设置为灰色不可用
06-29
div+js+css模拟select并且把无效的select选项设置为灰色不可用
用javascript实现div可编辑的常见方法
12-09
功能：实现网页内容的即时编辑，增加页面的可用性、交互性。 方法1：直接通过textarea标签实现，请运行下边代码： New Document #info { font-size: 12px; overflow:hidden; background-color: #ffffcc; ...
html 拖动div进行相应顺序的排序，亲测可用，简单方便
07-14
1、html 拖动div进行相应顺序的排序，亲测可用，简单方便 2、适用于各大场景，通过相应的js拖动来执行相应的方法 3、可以下载应用，不懂的可以一起探讨
spin DIV模拟加载等待图标，亲测可用
06-26
见官网http://spin.js.org/，但是官网提供的spin.js貌似无法使用，故提供亲测可用的spin.js
jquery控制div下所有连接
12-03
jquery控制div下所有连接 软件开发网 软件开发网 软件开发网 软件开发网 软件开发网 软件开发网 软件开发网 软件开发网 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
Vue Css 页面样式变灰色调
hhmmj的博客
07-26 645
Vue Css 页面样式变灰色调
设置选中最大值，选中数达最大值时，其他选项置灰
我的博客
11-23 276
需求描述：循环数组得到选项的div块，选中的爱好达到3个时，其他选项置灰，不能选择；点击取消3个中的一个选项，可以继续选择选项 图片描述： 循环得到选项 点击选中的样式 选中数量达到最大值 代码设计： <template> <div> <div class="interest-home flex"> <p ...
vue 验证码界面 点击后标灰并设置div按钮不可点击状态
热门推荐
haeasringnar的博客
12-13 1万+
1、先看看效果图 未点击获取验证码的按钮状态 点击后的不可点击状态 2、代码实现 &lt;template&gt; &lt;div class="my-code"&gt; &lt;input class="my-code-input" type="text" v-model="login_form.captcha" placeholder="Your Captch
帮我写个项目可用的抽奖js代码
最新发布
09-22
### 回答1： 好的，我会尽力写一份可用的抽奖 JavaScript 代码。 首先，我们需要准备一个奖池，存放所有的奖品： ``` const prizeList = ['一等奖', '二等奖', '三等奖', '四等奖', '未中奖']; ``` 接着，我们需要写一个函数来从奖池中随机抽取一个奖品： ``` function drawPrize() { const index = Math.floor(Math.random() * prizeList.length); return prizeList[index]; } ``` 最后，我们可以在 HTML 中添加一个按钮，点击后触发抽奖动作： ``` <button onclick="draw()">抽奖</button> <script> function draw() { const prize = drawPrize(); alert(`恭喜你抽中了 ${prize}`); } </script> ``` 希望这份代码能帮到你！ ### 回答2： 当然可以帮你写一个可用的抽奖JS代码。首先，我们需要确定抽奖的规则和奖项设置。 假设我们的抽奖活动有如下信息： 1. 参与抽奖的人员名单存储在一个数组中，例如：let participants = ["小明", "小红", "小刚", "小李"]; 2. 抽奖共设置了三个奖项，分别是一等奖、二等奖和三等奖。 3. 奖项对应的奖品信息存储在一个数组中，例如：let prizes = ["iPhone 12", "iPad Air", "小米手环"]; 根据以上信息，可以编写以下抽奖的JS代码实现： ```javascript // 抽奖函数 function drawLottery() { let index = Math.floor(Math.random() * participants.length); // 随机生成获奖者的下标 let winner = participants[index]; // 根据下标获取获奖者姓名 if (index >= 0) { participants.splice(index, 1); // 从参与者名单中移除已中奖者 return winner; } else { return null; // 没有参与者了，返回null表示抽奖结束 } } // 执行抽奖 let winners = []; let prize; while ((prize = prizes.shift()) && (winner = drawLottery())) { let result = `恭喜 ${winner} 获得 ${prize}！`; winners.push(result); } console.log(winners); // 输出所有中奖结果 ``` 上述代码实现了抽奖的逻辑。首先，通过随机生成获奖者的下标来获取获奖者姓名，并从参与者名单中移除已中奖者。然后，判断奖项是否还有剩余，并继续抽取下一个获奖者，直到所有奖项抽完或参与者名单为空。 最后，将每个中奖者和对应的奖品信息保存在一个数组中，并输出所有中奖结果。 希望以上代码能满足你的需求。如果有其他问题，请随时提问。 ### 回答3： 当然可以！以下是一个基本的抽奖JavaScript代码示例： ```javascript // 抽奖参与人员名单 var participants = [ "张三", "李四", "王五", "赵六", "陈七" ]; // 在页面中显示中奖结果的元素 var resultElement = document.getElementById("result"); // 点击抽奖按钮时触发的函数 function drawWinner() { // 随机获取中奖者 var winnerIndex = Math.floor(Math.random() * participants.length); var winner = participants[winnerIndex]; // 在页面中显示中奖结果 resultElement.innerHTML = "中奖者是：" + winner; } // 将抽奖函数绑定到抽奖按钮的点击事件上 var drawButton = document.getElementById("drawButton"); drawButton.addEventListener("click", drawWinner); ``` 你可以根据实际需求，调整参与人员名单（participants）和显示中奖结果的元素（resultElement）。在HTML页面中，你需要有一个按钮元素（`<button id="drawButton">抽奖</button>`），并给它设置一个id，用于绑定点击事件。同时，你需要在页面中添加一个用于显示中奖结果的元素（`<div id="result"></div>`）。 以上代码会在点击抽奖按钮时，随机选择一个参与人员作为中奖者，并在页面中显示中奖结果。希望这个代码示例能够满足你的需求！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值