尊敬的c知道,我想让您帮我做一个呈中间古风风格的弹窗,要有关闭弹窗的按钮,并且要能关闭弹窗
时间: 2023-05-27 13:02:12 浏览: 60
好的,我可以帮您制作一个呈中间古风风格的弹窗。以下是代码示例:
HTML部分:
```
<div class="popup">
<div class="popup-content">
<button class="close-button">×</button>
<h2>这是一个中间古风风格的弹窗</h2>
<p>内容内容内容</p>
</div>
</div>
```
CSS部分:
```
.popup {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.3);
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 600px;
padding: 20px;
background-color: #f7f7f7;
border-radius: 8px;
}
.close-button {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
line-height: 1;
font-weight: bold;
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
}
.close-button:hover {
color: #ff8c00;
}
```
JavaScript部分:
```
const popup = document.querySelector('.popup');
const closeButton = document.querySelector('.close-button');
// 点击关闭按钮时关闭弹窗
closeButton.addEventListener('click', function() {
popup.style.display = 'none';
});
// 点击弹窗外部区域时关闭弹窗
popup.addEventListener('click', function(event) {
if (event.target === popup) {
popup.style.display = 'none';
}
});
// 显示弹窗
popup.style.display = 'block';
```
将以上代码复制到相应的文件中,并根据需要进行修改即可。需要注意的是,需要将弹窗的内容部分写在`.popup-content`节点中。