<body>
<a href="#" id="tanchuan1" onclick="sc()">点击显示图片</a>
<div class="add-img" id="tanchuang2" style="display: none;">
<div class="add-rim">
<a id="add-close" href="javascript:closeDiv()">x</a>
<img src="../css/图片/ImageRevealHover-master/img/1.jpg">
</div>
</div>
</body>
/* 遮罩层 */
.add-img {
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 21%);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* 弹窗内容 */
.add-rim {
width: 600px;
height: 300px;
background-color: whitesmoke;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto; /* 居中 */
}
/* 关闭按钮 */
#add-close {
position: absolute;
right: 0;
top: 0;
font-size: 33px;
color: #bbbbbb;
margin-top: -15px;
text-decoration: none;
}
</style>
<script>
// 点击显示图片
function sc(){
document.getElementById('tanchuang2').style.display="block";
}
// 关闭按钮
function closeDiv(){
//当调用closeDiv函数时候，执行获取ID名为tanchuang2的标签 把它的style样式改为隐藏，
document.getElementById('tanchuang2').style.display='none';
}
</script>转载联系作者并注明出处：https://www.focusonseo.cn/jcczs/97.html