JS+CSS简单实现DIV遮罩层显示隐藏

最新推荐文章于 2024-02-18 02:37:57 发布
最新推荐文章于 2024-02-18 02:37:57 发布
阅读量544 收藏
点赞数
分类专栏： CSS JQuery 文章标签： CSS javascript
JQuery 同时被 2 个专栏收录
34 篇文章 1 订阅
订阅专栏
CSS
2 篇文章 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>
<title>DIV CSS遮罩层</title>
<script language="javascript" type="text/javascript">
function showdiv() {            
            document.getElementById("bg").style.display ="block";
            document.getElementById("show").style.display ="block";
        }
function hidediv() {
            document.getElementById("bg").style.display ='none';
            document.getElementById("show").style.display ='none';
        }
</script>
<style type="text/css">
        #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);}
        #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;}
</style>
</head>
<body>
<input id="btnshow" type="button" value="Show" οnclick="showdiv();"/>
<div id="bg"></div>
<div id="show">测试
<input id="btnclose" type="button" value="Close" οnclick="hidediv();"/>
</div>
</body>
</html>

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

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

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

#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;
}
效果



转载 :http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html

爱吃鱼油
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS遮罩层
weixin_44282093的博客
07-19 9276
css遮罩层
div遮罩层
热门推荐
黎小小的博客
07-05 1万+
实现遮盖层，使一部分区域不可点击编辑等。 1.简易遮罩层一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, i...
css案例（一）遮罩层
xtcbql的博客
10-01 1526
css案例：遮罩层
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
最新发布
风吹落叶的博客
02-18 2862
样式解析汇总：这段代码描述了一个在页面中居中显示、具有白色背景、灰色边框和一定内边距的固定定位元素，且在层叠顺序中处于较高的位置。：设置元素在层叠顺序中的位置为1000，使其位于具有较低 z-index 值的元素之上。：设置元素的定位方式为固定定位，元素相对于浏览器窗口固定位置，不随页面滚动而移动。：设置元素的边框为1像素宽的实线边框，颜色为淡灰色（#ddd）。：设置按钮内容与按钮边框之间的内边距，上下为10像素，左右为20像素。：将元素左边缘定位在距离父元素左边缘50%的位置，即居中水平定位。
利用js+css简单实现半透明遮罩弹窗
09-25
在给定的标题和描述中，我们看到了一个纯JavaScript（JS）和CSS实现的简单半透明遮罩弹窗的实例。这种方法避免了依赖于jQuery等大型库，使得代码更简洁且易于理解。 首先，我们需要两个`div`元素，一个用于弹窗内容...
(HTML+js+css)遮罩层实现源码
04-26
以上代码展示了如何通过JavaScript监听事件并在适当的时候显示或隐藏遮罩层。你可以根据项目需求调整这些示例，例如添加动画效果、交互逻辑等。 在实际开发中，遮罩层的应用非常广泛，如加载提示、弹窗提示、表单...
卫班科技---HTML+CSS遮罩层实现案例
02-18
例如，可以使用`transition`和`animation`属性实现遮罩层的平滑显示和隐藏。此外，`position`属性（如`fixed`或`absolute`）可以确保遮罩层始终位于页面的最前端，即使用户滚动页面也是如此。`z-index`属性则用来...
jQuery+CSS3实现的遮罩图片hover翻转效果源码.zip
11-06
总结来说，这个项目展示了如何结合jQuery的事件处理能力和CSS3的动画特性，创建一个动态的、用户交互的图片翻转效果，同时通过遮罩层增强视觉体验。对于希望提升网页互动性的开发者来说，这是一个值得学习和借鉴的...
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
10-22
主要介绍了使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享,编写半透明遮罩层时要注意定位问题、不要满屏遮罩,需要的朋友可以参考下
js 页面全部遮罩层
07-21
js遮罩全部页面，包括鼠标滚动，和上下键的控制，引用jquery编写，调用时需依赖jquery，
js实现遮罩加载效果
03-21
自己写的纯js和css动态实现遮罩层加载效果，挺好用的，IE8、FF、Chrome都测试过，还行。大家下载了，可以通过改CSS改变样式。喜欢和大家分享学习中的点点滴滴。
遮罩层样式
工作博客
02-09 694
#page_mask { display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 6000; -moz-opacity: 0.3; opacity: .30; filter: alpha(
CSS 遮罩层样式小结
RGSNbiubiubiu的博客
10-16 1000
遮罩层样式小结 单独设置一个div用于存放 使用固定定位position:fixed; 自身display:none;让自己隐藏 display:block;让自己显示 让其父集为body方便操作 根据需要让遮罩层充满整个界面 内部子集放入自己需要的样式 此处例如img 让img绝对定位position:absolte;在父集div的某个位置 父集的点击事件onclick 点击后会隐藏起来 显示遮罩层的元素的点击事件onclick点击后显示 操作display实现显隐 ...
遮罩层的实现及应用
lwf的博客
05-08 1万+
遮罩层的实现： 1、实现思路： 利用div实现遮罩层效果：利用一个全屏、半透明的div遮住页面上其它元素<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>遮罩层</title> <style> html,body { margin:0; h
html+css+js实现遮罩层的两种方法
Ainyu的博客
04-16 3897
一、div布局+css 1.html代码 <div class="a" id="a"> <img src="img/page3_img1.jpg"> <!--遮罩层开始--> <div class="b" id="b"> <p>遮罩层</p> </d...
通过css简单实现遮罩层
wsd02061112的博客
08-29 546
简单用css写一个遮罩层。
css+js 实现遮罩层,禁止按钮触发多次请求
David
07-05 1825
//遮罩背景 function openShadeDiv(){ var wnd = jQuery(window); var doc = jQuery(document); var wHeight=0; var wWidth=0; //当高度少于一屏 if(wnd.height()&gt;doc.height()){ wHeight = wnd.height(); ...
JS学习笔记 | 遮罩层Loading实现
cungudafa的博客
03-12 1974
遮罩层Loading实现
图片的遮罩层
qq_36935391的博客
12-25 1529
1、将遮罩层html代码与图片放在一个div  我是放在 .img_div里。 &lt;div class="img_div"&gt;     &lt;img src="./images/paella-dish.jpg"&gt;         &lt;a href="#"&gt;             &lt;div class="mask"&gt;    
css+js原生实现动画遮罩
07-08
你可以使用CSS和JavaScript原生实现动画遮罩。以下是一种实现方式： HTML结构： ```html <div class="container"> <div class="overlay"></div> <div class="content"> <!-- 这里是你的内容 --> </div> </div> ``` CSS样式： ```css .container { position: relative; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 设置遮罩层的颜色和透明度 */ opacity: 0; /* 初始透明度为0，即完全透明 */ transition: opacity 0.3s ease; /* 设置过渡效果，使遮罩层的透明度变化平滑 */ } .content { /* 这里是你的内容样式 */ } ``` JavaScript代码： ```javascript const overlay = document.querySelector('.overlay'); function showOverlay() { overlay.style.opacity = '1'; // 设置遮罩层透明度为1，即完全不透明 } function hideOverlay() { overlay.style.opacity = '0'; // 设置遮罩层透明度为0，即完全透明 } // 示例：点击按钮显示/隐藏遮罩层 const button = document.querySelector('button'); button.addEventListener('click', () => { if (overlay.style.opacity === '0') { showOverlay(); } else { hideOverlay(); } }); ``` 通过调用`showOverlay()`和`hideOverlay()`函数，你可以在需要的时候显示和隐藏遮罩层。例如，你可以在点击按钮时显示遮罩层，创建一个动画效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值