网站公告：本周五系统升级，服务暂停6小时
<!DOCTYPE html>
<html>
<head>
<title>网站公告：本周五系统升级，服务暂停6小时</title>
<style>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
<pre><code> .popup {
background-color: white;
padding: 20px;
border-radius: 10px;
max-width: 80%;
max-height: 80%;
overflow: auto;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.popup h2 {
margin-top: 0;
}
.popup p {
line-height: 1.5;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
color: gray;
}
</style>
</code></pre>
</head>
<body>
<div class='overlay'>
<div class='popup'>
<h2>重要公告</h2>
<p>尊敬的用户：</p>
<p>我们的网站将于本周五进行系统升级，届时将无法正常访问。预计升级时间为6小时左右。升级完成后，我们将为您提供更加稳定、高效的服务。敬请谅解。</p>
<p>如有任何疑问，请联系客服人员。</p>
<span class='close-btn'>×</span>
</div>
</div>
<pre><code><script>
var overlay = document.querySelector('.overlay');
var closeBtn = document.querySelector('.close-btn');
closeBtn.addEventListener('click', function() {
overlay.style.display = 'none';
});
overlay.addEventListener('click', function(event) {
if (event.target === overlay) {
overlay.style.display = 'none';
}
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lWlB 著作权归作者所有。请勿转载和采集!