html js 遮罩层

最新推荐文章于 2024-05-02 18:12:22 发布
最新推荐文章于 2024-05-02 18:12:22 发布
阅读量49 收藏
点赞数
文章标签： xhtml javascript ViewUI 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2  <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title>DIV CSS遮罩层</title>
 5     <script language="javascript" type="text/javascript">
 6         function showdiv() {            
 7             document.getElementById("bg").style.display = "block";
 8             document.getElementById("show").style.display = "block";
 9         }
10         function hidediv() {
11             document.getElementById("bg").style.display = 'none';
12             document.getElementById("show").style.display = 'none';
13         }
14     </script>
15     <style type="text/css">
16         #bg{ display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70);}
17         #show{display: none;  position: absolute;  top: 25%;  left: 22%;  width: 53%;  height: 49%;  padding: 8px;  border: 8px solid #E8E9F7;  background-color: white;  z-index:1002;  overflow: auto;}
18     </style>
19 </head>
20 <body>
21     <input id="btnshow" type="button" value="Show" onclick="showdiv();" />
22     <div id="bg"></div>
23     <div id="show">测试
24         <input id="btnclose" type="button" value="Close" onclick="hidediv();" />
25     </div>
26 </body>
27 </html>
View Code
按 Ctrl+C 复制代码

Copy上面的代码到HTML页面即可查看效果。

原理比较简单，就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时，通过JS去控制两个DIV的样式：display='block' or display='none'.就可以实现DIV的显示和隐藏。

注意两个DIV的z-index，显示在最上面的DIV的z-index一定要比遮罩层的z-index大。

weixin_33756418
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 锁定页面(js遮罩层弹出div效果)
12-12
代码如下:<htmlxmlns> &lt;head&gt; &lt;meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″/&gt; &lt;title&gt;UntitledDocument&lt;/title&gt; [removed] function createIframe(){ //mask遮罩层 var newMask=document.createElement(“div”); newMask.id=”mDiv”; newMask.style.position=”absolute”; ne
javascript+html实现遮罩层效果
一曲破东风的专栏
07-18 3231
javascript+html实现遮罩层效果
html页面加载js遮罩,js+html实现遮罩层效果
weixin_32672675的博客
06-02 257
//遮罩function coverDiv(){var procbg = document.createElement("div"); //首先创建一个divprocbg.setAttribute("id","mybg"); //定义该div的idprocbg.style.background = "#000000";procbg.style.width = "100%";procbg.style...
HTML遮罩层实现源码
03-25
HTML遮罩层实现源码，包括html、js、css和图片，并结合loading提示和DIV模拟模态窗口的示例展示遮罩层的使用
js+html5实现半透明遮罩层弹框效果
10-19
主要为大家详细介绍了js+html5实现半透明遮罩层弹框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯js实现遮罩层效果原理分析
12-11
* 遮罩层有通明效果 * 遮罩层没有实际意义，则无需在html部分就写上，当然写上同样可以实现 2、代码实现 html语言如下： 代码如下:<html> …. <body> <center> <div><input type=”button” value=...
基于JavaScript如何制作遮罩层对话框
11-22
2.在遮罩层上方在弹出一个层，由于遮罩层挡住了其他所有元素，用户只能点击弹出层，制造出模式窗口的假象。 废话不多说了，直接给大家贴js代码了。 <htmlxmlns> <head> <meta ...
HTML实现遮罩层的方法 HTML中如何使用遮罩层
同学小江的博客
12-23 5268
Web页面中使用遮罩层，可防止重复操作，提示loading；也可以模拟弹出模态窗口。 实现思路：一个DIV作为遮罩层，一个DIV显示loading动态GIF图片。在下面的示例代码中，同时展示了如何在iframe子页面中调用显示和隐藏遮罩层。 示例代码： index.html XML/HTML Code复制内容到剪贴板 >  html lang="zh-CN">  head>
【js】使用js实现遮罩层
Evan_QB的博客
01-27 9492
首先我们定义好html结构，mask为遮罩层的结构 登陆 使用css样式，首先使mask遮罩层隐藏 .mask{ width: 100%; height: 100%; position: fixed; top:0; left: 0; display: none; ba
html 动态遮罩层,js+html实现遮罩层效果（收藏哦）
weixin_31437695的博客
05-30 369
//遮罩function coverDiv(){var procbg = document.createElement("div"); //首先创建一个divprocbg.setAttribute("id","mybg"); //定义该div的idprocbg.style.background = "#000000";procbg.style.width = "100%";procbg.style...
html+css+js实现遮罩层的两种方法
Ainyu的博客
04-16 3756
一、div布局+css 1.html代码 <div class="a" id="a"> <img src="img/page3_img1.jpg"> <!--遮罩层开始--> <div class="b" id="b"> <p>遮罩层</p> </d...
html+css+js实现遮罩层技术
小猿的博客
04-02 358
css .shadow{ width:89%; height:100%; position:absolute; right:0; top:0; z-index:998; background-color:#000; opacity:0.8; display:none; } .addBox{ z-index:999; ...
html页面中js添加遮盖层实现等待效果
ToSweetSmiles的专栏
07-03 1641
遮罩层 #cover{ display:none; position:fixed; z-index:1; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.44); } #coverShow{ display:none; position:fixed;
常见的 HTML 标准
csdn_ad986ad的博客
04-30 781
HTML（Hypertext Markup Language）有多个版本和标准。
bpmn-js推荐几款常用的插件
飞云先生
04-30 122
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 1003
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 927
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
表格隔行变色
weixin_54339833的博客
05-02 382
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
html5 遮罩层 适用手机
07-22
要在手机上使用HTML5遮罩层，您可以使用CSS和JavaScript来实现。以下是一个简单的示例： HTML： ```html <!DOCTYPE html> <html> <div id="mask"></div> <!-- 页面内容 --> <script src="script.js"> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值