js简单实现div遮罩层

最新推荐文章于 2023-05-12 09:49:20 发布
最新推荐文章于 2023-05-12 09:49:20 发布
阅读量931 收藏 1
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smshuxue/article/details/16995879
版权

下面写了个列子简单实现Div遮罩层，如下值得收藏

[html] view plain copy
  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>  

软件-攻城狮
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现页面遮罩层
do_my_own_bystander的专栏
04-22 751
function shelter(){//遮罩层                    var sWidth,sHeight;                sWidth = screen.availWidth - 20;//防止溢出                if(screen.availHeight > document.body.scrollHeight){
DIV遮罩层如何实现
09-25
今天有任务让加个蒙版，JS小白的我在网上找了个修改下，改成了JS模版以后可以重复用啦,本文将详细介绍DIV遮罩层如何实现，需要的 朋友可以参考下
html5 div遮罩,DIV遮罩层如何实现
weixin_39593593的博客
05-30 698
今天有任务让加个蒙版，JS小白的我在网上找了个修改下，改成了JS模版以后可以重复用啦。复制代码代码如下:遮罩/*遮罩层*/#tinybox_1 {position:absolute;width:1002px;height:80px;background:#FFF;display: none;z-index: 99999;border:5px solid red;display:none;text-...
HTML + DIV +JS 实现弹窗加遮罩层
qq_45224062的博客
05-12 861
【代码】HTML + DIV +JS 实现弹窗加遮罩层。
html div全屏遮罩层,javascript div 遮罩层封锁整个页面
weixin_30896451的博客
05-30 650
具体解决方案如下：一、IE和FF下document.body对象的clientHeight，offsetHeight，scrollHeight属性的差别。clientHeight在IE和FF下，该属性没什么差别，都是指浏览器的可视区域，即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。offsetHeight在IE下，offsetHeight也是浏览器可视区域的高(包括边线)在FF下，off...
利用div实现遮罩层效果
w36680130的博客
12-25 1439
本文转载自：https://www.cnblogs.com/dige1993/p/4606032.html 作者：dige1993 转载请注明该声明。利用div实现遮罩层效果就是利用一个全屏、半透明的div遮住页面上其它元素，典型的例子就是百度的登录界面。下面贴出示例代码： <!DOCTYPE html> <html> <head> <meta ...
javascript div 遮罩层封锁整个页面
10-29
在客户端浏览器中，可以在某个时机使用javascript把一个div作为遮罩层，来封锁整个页面。
基于JavaScript实现全屏透明遮罩div层锁屏效果
10-22
主要介绍了基于JavaScript实现全屏透明遮罩div层锁屏效果的相关资料,需要的朋友可以参考下
js弹出div并显示遮罩层
12-09
代码如下: //——————–弹出层——————- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { ...
div css float浮动用法(left right)
smshuxue的专栏
11-28 4115
在学习牛腩老师的视频中，很深刻的体会了浮动带来的效果的震撼，现在是对B/S这块的知识是越来越喜欢，越来越愿意学习，特别是现在看网页的时候看到那些代码感觉很是熟悉，特别亲切，只是下面自己又通过网站的学习和大家通过分享。   div+css中float认识及css float用法，DIV CSS float浮动知识用法与float浮动学习 Css样式的float浮动属性，用于设置标签对象（如：标
CSS表达式
smshuxue的专栏
11-26 3354
避免CSS表达式 CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色： background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" ); 如上所示，expressio
CSS实现Div层背景半透明而内容不透明效果
smshuxue的专栏
11-28 1835
title>透明title> head> style> #container {     color: #154BA0;     background: #ff0000;     filter: Alpha(Opacity=10, Style=0);     opacity: 0.10;     position: absolute;     height: 200px;   
css 中的background:transparent到底是什么意思有什么作用
smshuxue的专栏
11-02 1635
点评：css 中的 transparent到底是什么意思? 一直觉得很奇怪,到底有什么用的啊?,本文将详细说明，需要的朋友可以参考下 有时我在看css时,看到有的css属性定义为background:transparent。意思就是背景透明。实际上background默认的颜色就是透明的属性。所以写和不写都是一样的 有段时间没写文章了,一直在学校,虽然带着电脑,但是不能上网啊!最近在用ja
JQuery之拖拽插件
smshuxue的专栏
11-28 1042
一直以来，都对JS获取元素的位置感到非常的困惑：一会client、一会offset、一会scroll。 再加上各大浏览器之间的不兼容，唉，搞得哥晕晕乎乎的。 而很多页面效果都要用到这些位置。不得已，得练练，得记记。 下面就来说说这个基于 JQuery的简易拖拽插件吧。    按惯例，先说说拖拽的原理，以及搞这么一个东东的步骤： 那什么是拖拽呢？ 看名字就知道了：就是把一个东东拖来拽去的。
js拖放效果
smshuxue的专栏
11-28 909
js拖放效果，包含程序原理 深度分析，可进行锁定和复位。 拖放效果，也叫拖拽，学名Drag-and-drop ，是最常见的js特效之一。 如果忽略很多细节，实现起来很简单，但往往细节才是难点所在。 这个程序的原型是在做图片切割效果的时候做出来的，那时参考了好几个同类的效果，跟muxrwc和BlueDestiny学习了不少东西。 虽然每次整理都觉得很好了，不过每隔一段时间又会发现得某个地
li列表中显示文字强制不换行，大于li宽度自动隐藏文字
smshuxue的专栏
11-28 900
li{ display:block; font-size:14px; height:16px; line-height:16px; width:330px; white-space:nowrap; //强制不换行 overflow:hidden; //自动隐藏文字 text-overflow: ellipsis; //文字隐藏后添加省略号 -o-text-overflow:el
Background-position的用法
smshuxue的专栏
11-02 885
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> title>title> style type
利用CSS定位背景图片
smshuxue的专栏
11-02 870
div{ background:#FFF url(image) no-repeat fixed x y;} 点评：我们在研究其他的网站的样式的时候经常会发现一种情况，就是在很多background属性里都调用同一张图片，来满足网页各个部分的使用。打开这种图片看一下，会发现这张图片上包含了很多小图片; 又如：       这些小图片就是整图分割后的各个部分，把各个部分
jquery弹出div遮罩层
最新发布
09-01
jQuery是一个JavaScript库，用于简化HTML文档遍历、事件...综上所述，通过使用jQuery的选择器和操作方法，结合CSS样式设置和JavaScript事件处理，可以很方便地实现弹出div遮罩层的效果，提升页面的用户体验和交互性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值