-
遮罩层
2017-05-22 08:16:18遮罩层展开全文<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script src="jquery-1.8.3.min.js"></script> </head> <style> .edit{ position: relative; left:10px; top:20px; width: 300px; height:350px; border: 1px solid #ccc; background: #FFF; text-align: center; z-index:0; display:block; } .edit input{ text-align: center; } .jr{ border:0px; } #zc533,#zc533d{ display:inline-block; border:1px solid #ccc; width:70px; margin-left:12px; } .wr{ border-radius:5px; width:80px; } .edit_sub button{ width:60px; height:35px; border-radius:10px; background-color:#007aff; border-color:#007aff; color:#fff; margin:0px 10px 0px 10px; } .mask { position: absolute; top: 0px; left: 0px; background-color: #777; z-index: 1002; opacity:0.1; } </style> <body> <div id="mask" class="mask"></div> <button onclick="showMask()" >点我显示遮罩层</button><br /> <div class="edit"> <p>注塑转储退料修改页面</p> <p>料号：<input id='lh' class='jr' value='' readonly='readonly'/></p> <p>品名：<input id='pm' class='jr' value='' readonly='readonly'/></p> <p>转出：<span id='zc533'>533</span><span id='zc533d'>533D</span></p> <p>数量：<input id='sl' class='wr' value=''/> 旧：<span id='jsl'>100000</span></p> <p>栈板：<input id='zb' class='wr' value=''/> 旧：<span id='jzb'>100000</span></p> <p>转入：<input id='zr' class='wr' value=''/> 旧：<span id='jzr'>100000</span></p> <div class='edit_sub'> <button onclick="javascript:alert('取消');">取消</button> <button onclick="javascript:alert('删除');">删除</button> <button onclick="javascript:alert('确认');">确认</button> </div> </div> <div class="edit"> <p>注塑转储退料修改页面</p> <p>料号：<input id='lh' class='jr' value='' readonly='readonly'/></p> <p>品名：<input id='pm' class='jr' value='' readonly='readonly'/></p> <p>转出：<span id='zc533'>533</span><span id='zc533d'>533D</span></p> <p>数量：<input id='sl' class='wr' value=''/> 旧：<span id='jsl'>100000</span></p> <p>栈板：<input id='zb' class='wr' value=''/> 旧：<span id='jzb'>100000</span></p> <p>转入：<input id='zr' class='wr' value=''/> 旧：<span id='jzr'>100000</span></p> <div class='edit_sub'> <button onclick="javascript:alert('取消');">取消</button> <button onclick="javascript:alert('删除');">删除</button> <button onclick="javascript:alert('确认');">确认</button> </div> </div> <script type="text/javascript"> //兼容火狐、IE8 //显示遮罩层 function showMask(){ $("#mask").css("height",$(document).height()); $("#mask").css("width",$(document).width()); $("#mask").show(); } //隐藏遮罩层 function hideMask(){ $("#mask").hide(); } </script> </body> </html>
-
遮罩层的图片遮罩层的图片遮罩层的图片遮罩层的图片
2021-02-03 18:46:47遮罩层的图片 -
点击遮罩层的背景关闭遮罩层
2019-01-16 19:51:36点击遮罩层的背景关闭遮罩层 在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层，但唯独点击内容区域不会关闭掉遮罩层。于是我开始模仿这个写案例，连内容也...展开全文开发工具与关键技术：Adobe Dreamweaver CC
作者：黄灿
撰写时间：2019.1.16在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层，但唯独点击内容区域不会关闭掉遮罩层。于是我开始模仿这个写案例，连内容也一模一样（因为这个练习就是要写出和华为关一样的效果或则比它更好的效果），一开始我是这样子写的（图1）
图1class=Select_Region_bj 我给了一个灰色半透明的背景样式，后来在Javascript中写onclick事件无论这么写，点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩层，后来下课期间我看见我同学他写的带能点击内容区不会关闭遮罩层。我问他你是这么写的，他告诉我：“把他们分离就可以的了。”我思考了一会，脑补：分离？怎么分离？补着补着补着就补出了背景和内容区分离。分离写（图2）
图2把背景层和内容区分开来写，不要在背景层中包裹内容，这样子点击内容区就不会关闭掉遮罩层了！
-
CSS遮罩层mask css制作遮罩层mask.zip
2021-01-06 14:55:12CSS遮罩层mask css制作遮罩层mask.zip -
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2020-10-29 00:01:14史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层 -
HTML实现遮罩层的方法 HTML中如何使用遮罩层
2020-09-28 10:53:02主要为大家详细介绍了HTML实现遮罩层的方法，Web页面中使用遮罩层，可防止重复操作，那么如何在HTML中使用遮罩层？感兴趣的小伙伴们可以参考一下
收藏数
6,701
精华内容
2,680