用js写一个自动弹窗公告
以下是一个简单的用JS写的自动弹窗公告:
HTML代码:
<body>
<h1>Welcome to My Website</h1>
<p>This is some sample text for the website.</p>
<div id="popup" class="popup">
<div class="popup-content">
<h2>Important Announcement</h2>
<p>This is an important announcement for our website visitors.</p>
<button id="close">Close</button>
</div>
</div>
</body>
CSS代码:
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
}
.popup-content {
background-color: white;
padding: 20px;
border-radius: 5px;
}
#close {
margin-top: 10px;
}
JS代码:
window.onload = function() {
var popup = document.getElementById("popup");
var close = document.getElementById("close");
// 显示弹窗
setTimeout(function() {
popup.style.display = "flex";
}, 3000);
// 关闭弹窗
close.onclick = function() {
popup.style.display = "none";
}
}
这个代码会在页面加载后等待3秒,然后显示一个弹窗公告。用户可以点击“Close”按钮来关闭弹窗。
原文地址: https://www.cveoy.top/t/topic/bmKE 著作权归作者所有。请勿转载和采集!