点击图标弹出二维码,点击页面其他任何地方,弹框隐藏
时间: 2023-08-16 15:16:42 浏览: 41
这是一个常见的交互设计,可以通过以下步骤实现:
1. 在页面上添加一个图标,并绑定点击事件。
2. 点击图标时,弹出一个包含二维码的弹框,并添加一个遮罩层(遮罩层可以用半透明的背景色实现)。
3. 给遮罩层绑定点击事件,当用户点击遮罩层时,隐藏弹框和遮罩层。
以下是示意代码:
HTML部分:
```
<div class="icon"></div>
<div class="popup">
<img src="二维码图片地址" alt="二维码">
</div>
<div class="mask"></div>
```
CSS部分:
```
.icon {
width: 50px;
height: 50px;
background-image: url("图标图片地址");
}
.popup {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: #fff;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}
```
JavaScript部分:
```
var icon = document.querySelector('.icon');
var popup = document.querySelector('.popup');
var mask = document.querySelector('.mask');
icon.addEventListener('click', function() {
popup.style.display = 'block';
mask.style.display = 'block';
});
mask.addEventListener('click', function() {
popup.style.display = 'none';
mask.style.display = 'none';
});
```