css部分
<style>
.box{
position:relative;
width: 74px;
height: 88px;
border: 1px solid #ccc;
margin: 100px auto;
font-size: 12px;
text-align: center;
color: #f40;
}
.close-btn {
position: absolute;
top: -1px;
left: -16px;
width: 14px;
height: 14px;
border: 1px solid #ccc;
line-height: 14px;
font-family: Arial, sans-serif;
cursor: pointer;
}
.ima {
width: 200px;
height: 275px;
}
</style>
html部分
<div class="box">
我的二维码
<img class="ima" src="二维码.jpg" alt="">
<p class="close-btn">x</p>
</div>
javascript部分
<script>
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
btn.onclick = function () {
box.style.display = 'none';
}
</script>
出现弹窗,点击关闭
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200804141155764.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mzc4MzU4,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200804141229987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mzc4MzU4,size_16,color_FFFFFF,t_70)