好的，下面是一个简单的渐显弹窗的样式和HTML代码：
HTML代码：
```
<
div class="modal-wrapper">
<
div class="modal">
<
div class="modal-header">
<h3>提示</h3>
<button class="close-btn">×</button>
</
div>
<
div class="modal-body">
<p>这是一个渐显弹窗。</p>
</
div>
<
div class="modal-footer">
<button class="confirm-btn">确定</button>
<button class="cancel-btn">取消</button>
</
div>
</
div>
</
div>
```
CSS代码：
```
/* 弹窗外层容器 */
.modal-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
display: none;
}
/* 弹窗容器 */
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: #fff;
border-ra
dius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
opacity: 0;
}
/* 弹窗标题栏 */
.modal-header {
pad
ding: 10px;
text-align: center;
background-color: #f5f5f5;
border-top-left-ra
dius: 10px;
border-top-right-ra
dius: 10px;
}
/* 弹窗内容区域 */
.modal-body {
pad
ding: 20px;
text-align: center;
}
/* 弹窗底部按钮区域 */
.modal-footer {
pad
ding: 10px;
text-align: center;
background-color: #f5f5f5;
border-bottom-left-ra
dius: 10px;
border-bottom-right-ra
dius: 10px;
}
/* 确认按钮样式 */
.confirm-btn {
background-color: #4caf50;
color: #fff;
border: none;
pad
ding: 10px 20px;
border-ra
dius: 5px;
margin-right: 10px;
}
/* 取消按钮样式 */
.cancel-btn {
background-color: #f44336;
color: #fff;
border: none;
pad
ding: 10px 20px;
border-ra
dius: 5px;
}
/* 关闭按钮样式 */
.close-btn {
position: absolute;
top: 0;
right: 0;
font-size: 30px;
color: #aaa;
background-color: transparent;
border: none;
pad
ding: 0 10px;
outline: none;
}
/* 弹窗渐显动画 */
.modal.fade-in {
animation: fade-in 0.5s forwards;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
```
JavaScript代码：
```
// 获取弹窗元素
var modalWrapper = document.querySelector('.modal-wrapper');
var modal = document.querySelector('.modal');
// 弹窗渐显函数
function fadeInModal() {
modal.classList.add('fade-in');
modalWrapper.style.
display = 'block';
}
// 弹窗关闭函数
function closeModal() {
modal.classList.remove('fade-in');
modalWrapper.style.
display = 'none';
}
// 确认按钮点击事件处理函数
function handleConfirmClick() {
console.log('点击了确认按钮');
closeModal();
}
// 取消按钮点击事件处理函数
function handleCancelClick() {
console.log('点击了取消按钮');
closeModal();
}
// 关闭按钮点击事件处理函数
function handleCloseClick() {
console.log('点击了关闭按钮');
closeModal();
}
// 绑定点击事件
document.querySelector('.confirm-btn').addEventListener('click', handleConfirmClick);
document.querySelector('.cancel-btn').addEventListener('click', handleCancelClick);
document.querySelector('.close-btn').addEventListener('click', handleCloseClick);
// 调用弹窗渐显函数
fadeInModal();
```
这是一个简单的渐显弹窗效果，你可以根据具体的需求进行自定义修改。
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
