我需要的是一款渐显性的弹窗效果兼容H5 移动 PC 要求居中哦,我可以直接镶入html的
时间: 2024-02-22 14:00:23 浏览: 132
html 手机端自定义弹窗效果
您可以尝试使用CSS3的transition属性来实现渐显效果,再结合position属性的absolute和top、left、right、bottom来实现居中。以下是一个示例代码:
```html
<div class="popup">
<p>这是弹窗内容</p>
</div>
```
```css
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.popup.show {
opacity: 1;
}
```
在JavaScript中,您可以通过添加/删除show类来控制弹窗的显示/隐藏:
```javascript
const popup = document.querySelector('.popup');
// 显示弹窗
popup.classList.add('show');
// 隐藏弹窗
popup.classList.remove('show');
```
阅读全文