遮罩层的实现

最新推荐文章于 2021-09-10 20:24:05 发布

gegeBelieve1

最新推荐文章于 2021-09-10 20:24:05 发布

阅读量856

点赞数

分类专栏： html以及前端问题

本文链接：https://blog.csdn.net/gegeBelieve/article/details/51019048

版权

html以及前端问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了一种使用JavaScript实现遮罩层的方法。通过简单的HTML结构配合内联样式和JavaScript函数控制显示与隐藏，实现了页面元素的遮罩效果。此方法适用于需要临时覆盖页面背景的应用场景。

摘要由CSDN通过智能技术生成

使用js实现遮罩层

<style>

#1: {
position:absolute;
z-index: 1000;
height:100%;
width:100%;
}
#up{
background:yellow;
position:absolute;
z-index: 1000;
height:50%;
width:50%;
top:25%;
left:20%;
padding: 8px;
border:10px blue solid;
display: none;
overflow: auto
}
</style>
<input type="button" value="show" id="show" οnclick="show()">
<div id="1">
</div>
<div id="up">遮罩层<input type="button" value="hidden" id="hidden" οnclick="divhid()"></div>
<script>
function show(){
document.getElementById('1').style.display="block";
document.getElementById('up').style.display="block";
}
function divhid(){

document.getElementById('1').style.display="none";
document.getElementById('up').style.display="none";
}
</script>