<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>发射弹窗代码</title>
<style>
.overlay {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0,0.5);
display: none;
z-index: 999;
}
.popup {
position: fixed;
top: 10%;
left: 25%;
width: 50%;
padding: 20px;
background: #fff;
border-radius: 5px;
Box-shadow: 0px 0px 50px #000;
display: none;
z-index: 1000;
}
</style>
</head>
<body>
<div class="overlay"></div>
<div class="popup">
<h1>发射弹窗代码</h1>
<p>这是一个弹出提示框的代码样例。</p>
<button onclick="closePopup()">关闭</button>
</div>
<script>
document.addEventListener("DOMContentLoaded",function() {
setTimeout(function() {
document.querySelector(".overlay").style.display = "block";
document.querySelector(".popup").style.display = "block";
},3000);
});
function closePopup() {
document.querySelector(".overlay").style.display = "none";
document.querySelector(".popup").style.display = "none";
}
</script>
</body>
</html>
以上代码实现了一个弹出提示框功能，其中包含两个重要部分：
1. overlay和popup两个DIV，前者控制灰色遮罩层的样式，后者控制弹出框的样式；
2. JavaScript代码部分实现了点击网页3秒后弹出提示框，并提供关闭按钮的功能。
使用这个样例代码，可以轻松地实现网页发射弹窗的功能，可以根据需要进行更改和修改，实现不同样式的弹出框效果。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
