You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>新时代、新龙头、新节奏</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Microsoft Yahei", sans-serif; } /* 落地页 */ .landing-page { width: 375px; height: auto; margin: 0 auto; overflow-y: auto; overflow-x: hidden; } .landing-page img { width: 100%; height: auto; display: block; } /* 弹窗 */ .popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 999; } .popup.show { display: flex; } .popup-content { width: 320px; text-align: center; } .popup-content img { width: 100%; height: auto; margin-bottom: 15px; } .popup-content img#closeBtn { width: 60%; margin-bottom: 5px; } </style> </head> <body> <!-- 落地页 --> <div class="landing-page"> <img src=./assent/8折页面.png /> </div>
<!-- 弹窗样式 --> <div class="popup" id="popup"> <div class="popup-content"> <img src="./assent/弹窗样式2.png"/> <img src="./assent/开心收下.png" id="closeBtn"/> </div> </div>
<script> // 获取弹窗元素（修正变量未定义问题） const popup = document.getElementById("popup"); const closeBtn = document.getElementById("closeBtn");
// 显示弹窗 window.onload = function () { setTimeout(function () { popup.classList.add("show"); }, 500); };
// 点击"开心收下"按钮关闭弹窗 closeBtn.addEventListener('click', function() { popup.classList.remove("show"); });
// 点击弹窗空白处（背景）关闭弹窗 popup.addEventListener('click', function(e) { if (e.target === popup) { popup.classList.remove("show"); } }); </script> </body></html>
|
