date: 2026-05-28 updated: 2026-05-28 conversation_id: 4bb909b9-c732-4de4-930c-67c7a5f2354d title: "开户活动弹窗制作" tags: [deepseek, conversation] ---
开户活动弹窗制作
创建时间: 2026-05-28 15:03
👤 用户:
2.4.3.开户活动 制作一个网页弹窗，最上方为开户活动，如开户成功后赠送一年【游资打板】权限包，如上方为输入框，开户姓名，输入框填写提示词为“输入已开户的姓名”，下方按钮为领取开户奖励，在下面一个【点击开户】按钮，点击后进入开户页面。
用以上信息绘制一个网页原型
💭 思考过程
我们需要制作一个网页弹窗，最上方为开户活动，如开户成功后赠送一年【游资打板】权限包，如上方为输入框，开户姓名，输入框填写提示词为“输入已开户的姓名”，下方按钮为领取开户奖励，在下面一个【点击开户】按钮，点击后进入开户页面。
用以上信息绘制一个网页原型。
解读: 需求: 制作一个网页弹窗，最上方显示开户活动信息: "开户成功后赠送一年【游资打板】权限包"。然后有一个输入框，开户姓名，提示词为"输入已开户的姓名"。下方一个按钮"领取开户奖励"。再下面一个按钮"点击开户"，点击后进入开户页面。
需要绘制网页原型，也就是一个前端页面，可能包括样式，弹窗效果。注意“弹窗”这个词: 制作一个网页弹窗，即该内容应该以模态框(modal)的形式展示在页面上，背景模糊或半透明遮罩。另外要求"最上方为开户活动"，也就是说在弹窗内容中。另外按钮行为: 领取开户奖励按钮需要做什么？可能需检查姓名是否填写，然后提示奖励领取或者执行某种逻辑；但未详细说明后端行为，但原型中可以提示“奖励已领取”或类似alert。点击开户按钮，进入开户页面，可以新开页面或跳转，原型可以用#模拟链接。同时要符合描述"开户成功后赠送一年【游资打板】权限包"，但最好在活动信息展示。另外可能需要考虑美观、现代风格。此外因为是网页原型，还需要支持响应式，居中显示弹窗，点击遮罩关闭？虽然不是明确要求，但一般弹窗有关闭功能？但需求未提及关闭按钮，但作为弹窗应该有关闭按钮或者点击遮罩关闭，为了更好的用户体验可提供X。但未写严格，但最好有。同时输入框验证领取开户奖励按钮: 若未输入姓名，提示填写姓名；若已输入，弹窗提示“已领取奖励”或其他展示。但需求只是绘制原型，需要交互演示。另外点击开户按钮进入开户页面，如果实际没有开户页面可跳转至“#”或在新页面显示占位。最好展示实际效果且注重完整性。提供html/css/js代码，需要自包含，在浏览器打开正常显示。
另外可能需要额外考虑: 领取开户奖励可能需要与输入姓名结合，业务逻辑上需要判断是否是已开户的姓名？但原型可以先做一个简单的提示信息确认已领取。活动文案展示“开户成功后赠送一年游资打板权限包”，可以给一个奖牌或图标。另一个细节: 最上方为开户活动（文本或卡片），然后再是“开户姓名”输入框，按钮位置。
还需要实现点击开户按钮进入开户页面，最好模拟跳转至新链接（比如填写mock地址）。可以使用target="blank"或当前页面跳转至设计好的开户demo页面，但因为是原型，可设置为点击alert或console，但是要求进入开户页面，为了真实可以跳转至“https://www.example.com/open-account”，但是由于演示环境，可以使用#占位，并且会有页面hash，或者弹窗显示即将跳转？最好符合预期，点击后直接跳转至新的开户页面(采用新窗口打开可以避免丢失原型状态，也可以使用重定向)。但最好模拟官方行为，因为是原型，可以给出一个模拟开户页面mock或直接弹窗提示跳转模拟。但需求说明“点击后进入开户页面”，为了严格，我们可以提供一个假的链接但显示“开户页面(示例)”，或者新窗口展示一段文本表示开户页面。更符合要求的是开启新窗口或当前窗口替换为一个简单的开户表单演示？但由于用户期望弹窗的独立性，一般保持在原页面点击跳转，可以设计一个开户页面地址指向当前页面?更稳妥方式: 使用alert说明实际开发会跳转至开户页面, 或者新建窗口打开一个占位页面?我认为原型最好模拟功能: 点击开户按钮，在新窗口打开"" 或显示toast告知"跳转开户"。但是最好用a标签，但按钮不是链接。所以可以用window.open或location.href。但考虑到原型演示，不想引起误解且满足需求说明, 提供一个演示跳转。由于没有具体的开户页面地址，我们可以mock一个空白页面显示“开户页面，您将可以完成开户流程”。这更好: 当点击“点击开户”时，会打开一个新的html页面或模态页？最好是单独页面展示类似于开户页面。我们可以设计同一个窗口内弹窗跳转?需求是进入开户页面，最简单是blank打开一个模拟页面，里面展示"开户表单"的示意，或者打开当前弹窗父页面跳转，但弹窗一般消失。为了符合预期，可以写一个单独的静态页面或者更简单因为只有一个html，点击开户时显示一个内嵌frame?不太适合。最好新页面展示简单的开户表单示意，并使用返回链接。因为用户只要求绘制网页原型，展示弹窗+那些功能，而开户按钮跳转mock模拟用户流程。我们可以直接跳转至一个模拟开户的页面(例如https://www.example.com)。但网络真实可能，不如新建窗口，渲染内容为“您正在开户...”。在弹窗中还有一个领取开户奖励按钮需要和姓名关联。此外，注意边界: 领取开户奖励需验证开户姓名已输入，然后模拟后端奖励发放，如弹出“成功领取一年游资打板权限包！”等。也需要模拟已开户成功？因为活动文案说开户成功后赠送，但此弹窗在假设已开户成功后领取奖励？但实际上弹窗场景可能是用户已经开户，然后进入此弹窗领取奖励。前端可以实现逻辑: 输入姓名后点击领取开户奖励判断姓名不为空，提示奖励已领取成功；若为空则提示填写姓名。再次领取可提示已经领取过？最好是防止多次领取，可以用一个标记变量。但为了简单暂不设复杂，但是做好演示应该额外添加状态，但不过需求原型只要展现交互，所以默认可以多次领取。但是最好展示真实情况模拟一次领取，出现反馈。另外这个弹窗最上方显示的活动文本也可以解释已有用户领取条件等。同时因为页面包含“点击开户”按钮，针对尚未开户的用户，引导点击开户按钮去开户。开户成功后回来?但实际上如果按照流程，用户点击开户进入开户页面，开户后返回可能还需显示弹窗并自动领取奖励？由于简单原型，不必过分复杂，我们可以提供简单但完整的设计，记录一个全局变量记录是否开户成功，但为了演示不需要这样，用户测试明白即可。
鉴于要求包含输入框填写提示词，还需要风格。因为“开户活动”，“开户成功后赠送一年游资打板权限包”，在设计时可以做突出显示样式。
我们需要写html css和js。要求完全响应。
因为要制作为弹窗，那么页面背景可以添加一些内容展示背景或说明，弹窗置于中央，有遮罩层，弹窗有圆角和阴影，最好有关闭按钮。另外要求“制作一个网页弹窗”，本身也是模态框，一般为显示在最前，背景滚动禁用?可简单设置。单击遮罩关闭弹窗？通常添加关闭或取消功能。
弹窗内布局:
标题行（可选关闭按钮），主内容包含:
开户活动信息: 显示奖励内容: “🎉 开户成功后赠送一年【游资打板】权限包 🎉”，也可以加一些描述。
然后输入框：开户姓名， placeholder是“输入已开户的姓名”。名字输入框前可以加label。
按钮：“领取开户奖励”。
第二个按钮：“点击开户”。
如果有另外的需求布局，要符合顺序: 最上方活动，然后输入框，领取开户奖励按钮，再下方点击开户按钮。按照设计即可。
还需要考虑按钮之间的距离和样式。如果弹窗高度不够，需要响应。
此外新增细微逻辑：由于输入框填写已开户姓名，领取奖励时候可以发送数据，展示提示。如果未开户点击领取奖励，提示请先开户，但按照现实用户输入姓名后，点击领取奖励模拟成功领取，无需后端。但是最好增加一个校验: 如果该用户尚未开户(根据什么? 由于没有后端无法知道实际开户状态，但是我们可以模拟假设任何输入的姓名都被视为已开户，但是需要提醒开户成功？其实可以是逻辑: 领取奖励时先判断姓名不为空，然后展示成功“您已成功领取一年游资打板权限包!”；为空则提示填写姓名。另外奖励只能领取一次?可以实现点击领取奖励后按钮禁用或显示灰色，但是未提及但做好最佳实践，额外增加状态避免重复领取影响演示，用户可以刷新页面试探。但为了简单，可允许重复领取显示但逻辑还是提示领取成功，但重复显示成功消息，可能会有困惑。设计为每个会话只能领取一次且本地存储吗？不太必要；做一个简单标记，一旦领取成功后，再点击提示“您已领取过奖励”。这样更合理避免滥用。另外如果未输入姓名，提示输入姓名，领取成功后之后禁止再次领取。当然也可以再次点击提示已领取。同时如果想模拟重置需要刷新。也可以不做过于复杂，但提供更好的用户体验适合展示。
此外点击开户按钮，应跳转至开户页面。由于演示环境，我们可以使用window.open打开新页面，内容是一个静态模拟开户页面，可以在新页面中简单写开户表单，展示一个消息“这是开户页面，完成开户流程”。需要额外新建一个html页面但是只是一个单文件解决方案，用户生成单一html文件，所以点击开户按钮打开新窗口但使用Blob或DataURL? 也可以在同一页面内通过iframe弹出，但不符合新页面，更稳妥做法是在当前页面模拟跳转显示开户内容不太好，因为要求"进入开户页面"，最好是在另一个标签页展示，用户可返回原页面试探弹窗。我们可以把mock开户页面简单定义为一个独立html片段，但是我们不能保证生成第二个文件，但可以用data:text/html生成内置页面。可以在点击开户按钮时，动态创建一个新窗口，其中显示开户表单或简单页面，类似:
const newWin = window.open(); newWin.document.write('...模拟开户页面内容，包含开户表单和开户提交按钮...');但跨域限制同源无所谓; 或者采用创建新窗口显示内容，这个方法比较合理。用户点击开户按钮时，新开窗口展示“开户页面演示: 请填写信息完成开户”。在该页面上设置一个提交模拟成功关闭或提示完成开户后回到原页面并刷新奖励?但是需求没有太复杂，这样做既满足“点击进入开户页面”，又能在mock上体现。不过确保弹窗原页面保持。
为了简单且确保没有多余后端，使用window.open添加对应内容。更简单，使用target="_blank"的a标签样式但用button模拟，但不如新窗口。显示一个简单的开户示范页面，包含姓名、手机号等，或者提供“立即开户”按钮，点击表示开户成功后提示并关闭窗口。但是原型越简单越好，能够传达预期交互即可。但为了体现质量，可以提供一个示范开户页面，点击开户成功后，将模拟添加奖励?但不去做跨页面复杂通信，我们可以简单展示表明开户页面。
因此方案：主页面带弹窗modal，点击“点击开户”时打开一个新窗口（或新标签页），展示简单的开户页面信息，显示“这是模拟的开户页面”，或者提供一个简易表单。为了演示方便，新窗口可以是弹窗显示说明，并有一个关闭提示。但最好提供完整。
另外领取开户奖励需要逻辑，模拟成功后可以显示通知提示。开发使用现代CSS，圆润设计，渐变背景，暗色调遮罩。为了让用户清楚，采用flex/grid。另外输入框，按钮hover，焦点。字体。
另外涉及移动端？暂时桌面效果。需要保证所有功能在chrome运行，无报错。
另外附加需求：因为弹窗上方说明开户活动，下方有输入框用于"开户姓名"，可能表示用户输入自己姓名后领取奖励，可以是奖励领取流程，所以需要一个“领取开户奖励”按钮触发。而点击开户按钮表示去开户，对于未开户用户。
还有可能需要注意到，如果点击开户之后，如果开户成功应反馈给弹窗？由于不需要跨窗口交流可以忽略，单独原型演示逻辑不会太复杂。
另一个细节: 开户活动弹窗里包括“开户成功后赠送一年【游资打板】权限包”，额外显示说明“请确认已开户并输入姓名领取奖励”。这样更加明确。设计还应该包含关闭功能。
而且弹窗默认可见，因此页面加载即显示模态框，不需要额外触发。还要确保在弹窗外围和遮罩，通过关闭按钮或点击遮罩关闭弹窗。同时也可以显示支持关闭。
需要兼容所有浏览器。
我会编写代码：
结构：body设置相对深色或半透明遮罩，模态框白色卡片，内边距，宽度90% max-width 500px。显示关闭X图标。
下面布局：
- 活动区域：背景高亮，小图标，展示“🎁开户活动”加粗，说明赠送一年游资打板权限包。最好带边框，与下边距。
- 输入框组：开户姓名*，input type=text，placeholder="输入已开户的姓名"。可加入图标或验证反馈。
- 领取开户奖励按钮：样式主按钮风格，点击触发领取逻辑，输入姓名验证及防止重复领取成功标记，显示消息浮层toast或alert，为了现代体验使用小的通知提示（可制作一个动态alert区域）。
- 点击开户按钮：次要按钮或边框风格，点击调用openAccountPage函数，使用window.open展示自定义开户页面内容（动态生成html字符串，编写简单开户表单，标明模拟效果）。
此外如果有必要，第二个按钮下面有可能提示信息。
因为领取奖励需要记录避免重复领取，设定一个claimed标志，用户领取成功后不能重复领取，并通过全局变量存储，以及显示反馈信息。同时还要考虑点击开户功能不会重置领取标志，无影响。
另外如果输入框为空点击领取，提示请输入姓名。若已领取过，提示已经领取过奖励。支持在领取成功后，如果重新刷新可以恢复，但无所谓。
还需注意，领取成功后显示成功信息显示奖励送达，且可以禁用领取按钮或改变文字状态。用户交互更好，提供体验。
另外因为点击开户进入了模拟开户页面，在模拟开户页面中展示开户表单，我们在新窗口提供的开户页面包含简易信息：标题、账号、手机等，并有一个模拟“立即开户”按钮或“完成开户”按钮，用来表示开户完成。但为了让用户更满意，可以让用户在模拟开户页成功开户后，回到原页面领取奖励。但这样跨页面通信复杂。不过原型可以只展示开户页面示意，由用户自己填写无保存，但满足“点击开户进入开户页面”基本条件。因此完全可以模拟，但需要显示内容明显，表示是“开户中心”。另外如果在模拟页面点击提交开户(模拟完成)提示“开户成功，请返回原页面领取奖励”。这样更有连贯性。但是还是尽量符合。
鉴于严格性，我们在新窗口页面中提供一个表单、开户按钮触发成功后提示并给出返回建议，更加完美。
实现步骤如下:
创建index.html，样式加上动画，模态框保证z-index。
另外点击遮罩关闭或关闭按钮关闭，弹窗关闭后不能再次调出？最好不用影响。因为弹窗是展示主要界面，可以默认加载出现，如果关闭了可提供重新显示？通常不需要，但弹窗关闭后主体没了用户无法使用主要功能，因此可以在页面空白处提醒重新刷新？更好的因为描述时永远显示弹窗，可设定禁止关闭遮罩关闭?但可提供X关闭，同时如果关闭后可以提供一个按钮“重新打开弹窗”。虽然需求未提及，但是为了演示友好，用户可能不小心关闭，再次可以通过页面某个浮动按钮打开弹窗。也可以给页脚小按钮显示“重新显示活动弹窗”。加强体验。核心弹窗初始化默认显示，如果用户关闭需要再次显示，在页面上固定位置或右下角悬浮显示“显示弹窗”。比较简单更好。
为了满足需求必现，弹窗可以隐藏后重新显示。同时出现时候背景滚动禁止。
实现所有逻辑。
注意移动适应边距。
接下来编写代码。
布局谨慎考虑：
【关闭】按钮在右上角。
活动区域标题：游资打板权限包，可展示标记。
输入框: 开户姓名。
按钮1: 领取开户奖励(主要颜色)。按钮2: 点击开户(次要，边框样式)。两个按钮之间间距。
同时下方显示状态消息区显示领取结果，避免使用alert，在当前弹窗内添加一个消息条。
又因为点击开户可能在新窗口打开，无需影响当前弹窗。
需要注意的是点击开户应跳转到开户页面，并且避免干扰弹窗。对于手机设备新窗口行为。
另外在mock开户页面中包含跳转逻辑，为了更好地展现。
编写代码。
编写逻辑在window.open时，动态生成内容。考虑到内容写法，避免xss安全。必须完全。
由于在点击开户按钮函数内部，我们利用创建新窗口，写入html字符串。代码内包含简单样式，表单模拟几个字段和开户提交按钮，提交时alert提示开户成功（模拟）并建议回到原页面领取奖励。这样用户也有模拟行为。还可以增加返回链接。
此外也要满足“开户活动的最上方显示”等，弹窗正常。
为了防止打开窗口被浏览器阻止，应直接在按钮点击事件中执行。另外如果window.open返回null提醒启用弹出窗口。
编写代码时将所有内容包装在html当中。
最终的完整文档。
实现现在开始编写。
以下是您所需的开户活动弹窗的HTML代码。它实现了一个模态弹窗，用于展示开户奖励并引导用户领取奖励或进入开户页面。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>游资打板·开户活动弹窗</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, 'Segoe UI', 'PingFang SC', Roboto, 'Helvetica Neue', sans-serif;
}
/* 页面背景 — 模拟真实页面，衬托弹窗 */
body {
min-height: 100vh;
background: linear-gradient(145deg, #1a2a3a 0%, #0f1a24 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
backdrop-filter: blur(2px);
}
/* 装饰性背景元素，让弹窗更精致 */
.bg-pattern {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(circle at 10% 20%, rgba(255,215,0,0.08) 2%, transparent 2.5%);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
}
/* 页面辅助说明（弱提示） */
.helper-note {
position: fixed;
bottom: 20px;
left: 0;
right: 0;
text-align: center;
font-size: 13px;
color: rgba(255,255,255,0.5);
background: rgba(0,0,0,0.3);
padding: 6px 12px;
width: fit-content;
margin: 0 auto;
border-radius: 40px;
backdrop-filter: blur(4px);
pointer-events: none;
z-index: 1;
}
/* 模态框遮罩层 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
transition: all 0.25s ease;
}
/* 弹窗容器 */
.modal-container {
width: 90%;
max-width: 500px;
background: #ffffff;
border-radius: 48px 32px 48px 32px;
box-shadow: 0 30px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 215, 0, 0.2);
overflow: hidden;
animation: modalSlideUp 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
transition: transform 0.2s;
}
@keyframes modalSlideUp {
from {
opacity: 0;
transform: translateY(40px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* 弹窗头部（关闭按钮区域） */
.modal-header {
display: flex;
justify-content: flex-end;
padding: 16px 20px 0;
}
.close-btn {
background: #f0f2f5;
border: none;
width: 32px;
height: 32px;
border-radius: 40px;
font-size: 20px;
line-height: 1;
cursor: pointer;
color: #5a6874;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.close-btn:hover {
background: #e4e8ed;
color: #1e2a36;
transform: scale(1.02);
}
/* 弹窗主要内容 */
.modal-content {
padding: 0 28px 32px 28px;
}
/* 开户活动Banner */
.activity-banner {
background: linear-gradient(135deg, #FFE6B0 0%, #FFF1D6 100%);
border-radius: 36px;
padding: 24px 20px;
margin-bottom: 32px;
text-align: center;
box-shadow: 0 6px 14px rgba(255, 193, 7, 0.2);
border: 1px solid rgba(255, 210, 80, 0.5);
position: relative;
overflow: hidden;
}
.activity-banner::before {
content: "⚡";
font-size: 100px;
position: absolute;
bottom: -20px;
right: -15px;
opacity: 0.15;
pointer-events: none;
transform: rotate(-10deg);
}
.activity-badge {
background: #FFB347;
display: inline-block;
padding: 6px 16px;
border-radius: 60px;
font-size: 13px;
font-weight: 700;
color: #2C1A00;
letter-spacing: 0.5px;
margin-bottom: 14px;
backdrop-filter: blur(2px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1);
}
.activity-title {
font-size: 26px;
font-weight: 800;
color: #B45F06;
margin-bottom: 10px;
letter-spacing: -0.3px;
}
.activity-desc {
font-size: 18px;
font-weight: 700;
color: #E67E22;
background: rgba(255,255,210,0.7);
display: inline-block;
padding: 6px 18px;
border-radius: 40px;
backdrop-filter: blur(2px);
}
.highlight-gold {
background: linear-gradient(120deg, #F5B042, #FFD966);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: none;
font-weight: 900;
}
/* 输入框组 */
.input-group {
margin-bottom: 28px;
}
.input-label {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #2c3e4e;
margin-bottom: 10px;
font-size: 15px;
}
.input-label span {
background: #FFB34720;
padding: 4px 10px;
border-radius: 50px;
font-size: 12px;
color: #C97E0A;
}
.name-input {
width: 100%;
padding: 16px 18px;
font-size: 16px;
border: 1.5px solid #e2e8f0;
border-radius: 60px;
background: #fefefe;
transition: all 0.2s;
outline: none;
color: #1e2a36;
font-weight: 500;
}
.name-input:focus {
border-color: #F5B042;
box-shadow: 0 0 0 3px rgba(245, 176, 66, 0.2);
background: #ffffff;
}
.name-input::placeholder {
color: #b9c3cb;
font-weight: 400;
font-size: 15px;
}
/* 按钮组 */
.buttons-group {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 10px;
}
.btn-primary {
background: linear-gradient(105deg, #F5B042 0%, #FF9500 100%);
border: none;
padding: 14px 0;
border-radius: 60px;
font-weight: 700;
font-size: 18px;
color: white;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 8px 18px rgba(245, 176, 66, 0.35);
letter-spacing: 1px;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(245, 176, 66, 0.45);
background: linear-gradient(105deg, #FFA123 0%, #FF8C00 100%);
}
.btn-primary:active {
transform: translateY(1px);
}
.btn-outline {
background: transparent;
border: 2px solid #FFB347;
padding: 12px 0;
border-radius: 60px;
font-weight: 700;
font-size: 17px;
color: #C97E0A;
cursor: pointer;
transition: all 0.2s;
letter-spacing: 1px;
}
.btn-outline:hover {
background: #FFF7E8;
border-color: #F5A623;
color: #B45F06;
transform: scale(0.98);
}
/* 提示消息区 */
.message-area {
margin-top: 20px;
padding: 10px 12px;
background: #F8FAFE;
border-radius: 60px;
font-size: 13px;
text-align: center;
color: #2c6b2f;
transition: all 0.2s;
min-height: 52px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid #eef2f8;
}
.msg-error {
background: #FFF2F0;
color: #c2412c;
border-color: #FFD1C9;
}
.msg-success {
background: #E8F7EF;
color: #117f4a;
border-color: #B8E4CE;
}
.msg-warning {
background: #FFF9E8;
color: #B95F00;
}
/* 右下角重新唤起按钮（弹窗关闭后可用） */
.reopen-trigger {
position: fixed;
bottom: 80px;
right: 24px;
background: #FF9500;
color: white;
border: none;
border-radius: 60px;
padding: 12px 24px;
font-weight: 600;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
z-index: 1001;
transition: all 0.2s;
backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,0.3);
}
.reopen-trigger:hover {
background: #FFAD33;
transform: scale(1.02);
}
.hidden {
display: none;
}
/* 小图标点缀 */
.icon-gift {
font-size: 20px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="bg-pattern"></div>
<div class="helper-note">🎯 完成开户即可领取「游资打板」年度权限</div>
<!-- 弹窗主结构 -->
<div id="modalOverlay" class="modal-overlay">
<div class="modal-container">
<div class="modal-header">
<button class="close-btn" id="closeModalBtn" aria-label="关闭弹窗">✕</button>
</div>
<div class="modal-content">
<!-- 最上方：开户活动 -->
<div class="activity-banner">
<div class="activity-badge">🔥 限时福利 🔥</div>
<div class="activity-title">游资打板·至尊权限</div>
<div class="activity-desc">
🎁 开户成功后赠送 <strong style="background: #FFDE9E; padding: 0 8px; border-radius: 40px;">一年【游资打板】权限包</strong> 🎁
</div>
<div style="font-size: 12px; margin-top: 12px; opacity: 0.8;">✨ 顶级策略 · 实时狙击 ✨</div>
</div>
<!-- 开户姓名输入框 -->
<div class="input-group">
<div class="input-label">
📛 开户姓名 <span>已验证身份</span>
</div>
<input type="text" id="accountName" class="name-input" placeholder="输入已开户的姓名" autocomplete="off">
</div>
<!-- 按钮组 -->
<div class="buttons-group">
<button id="claimRewardBtn" class="btn-primary">🎁 领取开户奖励</button>
<button id="openAccountBtn" class="btn-outline">📄 点击开户</button>
</div>
<!-- 消息反馈区域（替代alert，更精致） -->
<div id="messageBox" class="message-area">
💡 输入姓名后即可领取专属奖励
</div>
</div>
</div>
</div>
<!-- 重新打开弹窗的按钮（默认隐藏，关闭弹窗后才显示） -->
<button id="reopenModalBtn" class="reopen-trigger hidden">
🔓 重新打开活动弹窗
</button>
<script>
(function() {
// DOM 元素
const modalOverlay = document.getElementById('modalOverlay');
const closeBtn = document.getElementById('closeModalBtn');
const reopenBtn = document.getElementById('reopenModalBtn');
const claimBtn = document.getElementById('claimRewardBtn');
const openAccountBtn = document.getElementById('openAccountBtn');
const nameInput = document.getElementById('accountName');
const messageBox = document.getElementById('messageBox');
// 状态变量
let rewardClaimed = false; // 是否已领取过奖励（单次会话）
let currentName = ''; // 记录领取人姓名（仅展示用，不影响再次领取限制）
// ========== 辅助函数：显示消息 ==========
function showMessage(msg, type = 'info') {
// 移除所有样式class
messageBox.classList.remove('msg-error', 'msg-success', 'msg-warning');
if (type === 'error') {
messageBox.classList.add('msg-error');
} else if (type === 'success') {
messageBox.classList.add('msg-success');
} else if (type === 'warning') {
messageBox.classList.add('msg-warning');
} else {
// info 普通样式
messageBox.style.background = '#F8FAFE';
messageBox.style.color = '#2c3e4e';
}
messageBox.innerHTML = msg;
// 5秒后如果还是普通提醒，可以回归默认提示，但为了避免覆盖重要状态不清除也可，但保持清爽
if (type !== 'error') {
// 不自动清除成功消息太长也无妨，但保留最近消息
}
}
// 重置消息区域到普通状态 (清空特殊样式)
function resetMessageToDefault() {
if (!rewardClaimed) {
messageBox.classList.remove('msg-error', 'msg-success', 'msg-warning');
messageBox.style.background = '#F8FAFE';
messageBox.style.color = '#2c3e4e';
messageBox.innerHTML = '💡 输入姓名后即可领取专属奖励';
} else {
// 已领取状态下保持成功样式
messageBox.classList.remove('msg-error', 'msg-warning');
messageBox.classList.add('msg-success');
messageBox.innerHTML = '✅ 您已成功领取一年【游资打板】权限包！享受顶级游资策略。';
}
}
// ========== 领取开户奖励逻辑 ==========
function handleClaimReward() {
// 1. 获取输入的姓名，并去除首尾空格
const name = nameInput.value.trim();
// 2. 验证姓名是否为空
if (name === "") {
showMessage('❌ 请填写开户姓名后再领取奖励', 'error');
// 震动输入框轻提醒
nameInput.style.borderColor = '#e03a3a';
setTimeout(() => {
if (nameInput) nameInput.style.borderColor = '#e2e8f0';
}, 1500);
return;
}
// 3. 已经领取过奖励的情况
if (rewardClaimed) {
showMessage('🎉 您已经领取过「游资打板」年度权限啦！每个账户仅可领取一次', 'warning');
return;
}
// 4. 模拟领取成功 —— 根据活动规则“开户成功后赠送”，由于姓名已填写，视同已经完成开户状态，发放奖励
// 这里增加非常友好的提示，同时记录领取状态
rewardClaimed = true;
currentName = name;
// 可选的额外动画效果: 按钮文字修改等
claimBtn.textContent = '✨ 已领取奖励 ✨';
claimBtn.style.background = '#A0C0A0';
claimBtn.style.opacity = '0.9';
claimBtn.style.cursor = 'default';
claimBtn.disabled = true;
// 显示成功信息，包含姓名与奖励包名
showMessage(`🎊 恭喜 ${name} ！成功领取一年【游资打板】权限包，顶级打板策略即刻生效！ 🎊`, 'success');
// 可选额外: 控制台打印，不影响体验
console.log(`[活动] 用户 ${name} 已领取游资打板年度权限包`);
}
// ========== 点击开户 -> 进入开户页面 (新窗口模拟开户流程) ==========
function handleOpenAccount() {
// 新窗口模拟一个完整的开户页面 (独立美观的开户表单页)
// 为了满足需求 “点击后进入开户页面”，打开新窗口并提供真实的开户模拟界面。
// 避免被浏览器拦截，直接调用 window.open 并写入内容
const accountWindow = window.open('', '_blank');
if (!accountWindow) {
showMessage('⚠️ 浏览器可能阻止了新窗口打开，请允许弹窗后重试', 'warning');
return;
}
// 构造模拟开户页面的HTML结构，精美且功能示意
const mockPageHTML = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>游资打板 · 在线开户中心</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, 'Segoe UI', 'PingFang SC', sans-serif; }
body {
background: linear-gradient(145deg, #0f212e 0%, #07131c 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.account-card {
max-width: 560px;
width: 100%;
background: #ffffff;
border-radius: 48px 32px 48px 32px;
padding: 32px 28px 42px;
box-shadow: 0 30px 40px rgba(0,0,0,0.4);
border: 1px solid rgba(255,200,100,0.6);
}
.logo-area { text-align: center; margin-bottom: 28px; }
.badge { background: #F5B042; display: inline-block; padding: 6px 20px; border-radius: 40px; font-weight: bold; color: #2C1A00; }
h1 { font-size: 28px; margin: 20px 0 8px; color: #1e2f3c; }
.sub { color: #6f7e8c; margin-bottom: 28px; text-align: center; }
.input-row { margin-bottom: 20px; }
label { font-weight: 600; display: block; margin-bottom: 8px; color: #2c3e4e; }
input, select { width: 100%; padding: 14px 16px; border-radius: 60px; border: 1.5px solid #e2e8f0; font-size: 15px; outline: none; transition: 0.2s; }
input:focus { border-color: #F5B042; box-shadow: 0 0 0 3px rgba(245,176,66,0.2); }
.btn-open {
width: 100%;
background: linear-gradient(105deg, #F5B042, #FF9500);
border: none;
padding: 16px;
border-radius: 60px;
font-weight: bold;
font-size: 18px;
color: white;
margin-top: 20px;
cursor: pointer;
transition: 0.2s;
}
.btn-open:hover { transform: translateY(-2px); background: #FFA123; }
.info-note { margin-top: 24px; background: #FFF6E5; border-radius: 28px; padding: 14px; font-size: 13px; text-align: center; color: #9B6A00; }
.close-tip { text-align: center; margin-top: 20px; font-size: 12px; color: #8b9aab; }
hr { margin: 20px 0; border-color: #eee; }
</style>
</head>
<body>
<div class="account-card">
<div class="logo-area">
<div class="badge">🏦 官方指定 · 极速开户</div>
<h1>🔥 游资打板专属通道</h1>
<div class="sub">完成开户即享「一年游资打板权限」+ 顶级策略池</div>
</div>
<div class="input-row">
<label>📛 真实姓名</label>
<input type="text" id="realName" placeholder="与身份证一致" value="${nameInput.value.trim() ? nameInput.value.trim() : ''}">
</div>
<div class="input-row">
<label>📱 手机号码</label>
<input type="tel" id="phone" placeholder="11位手机号">
</div>
<div class="input-row">
<label>📧 身份证后6位</label>
<input type="password" id="idCard" placeholder="用于身份验证">
</div>
<button id="submitOpenBtn" class="btn-open">✅ 立即开户并领取权益</button>
<div class="info-note">
🎁 模拟开户流程：点击开户后即表示开户成功，返回原弹窗页面可领取一年【游资打板】权限包。<br>
(实际业务按监管要求，此处仅展示交互原型)
</div>
<div class="close-tip">✨ 本窗口为开户页面，开户成功后请返回原页面领取奖励 ✨</div>
</div>
<script>
const submitBtn = document.getElementById('submitOpenBtn');
const nameField = document.getElementById('realName');
const phoneField = document.getElementById('phone');
const idField = document.getElementById('idCard');
submitBtn.addEventListener('click', function(e) {
e.preventDefault();
const userName = nameField.value.trim();
if (!userName) {
alert('请填写姓名');
return;
}
if (!phoneField.value.trim() || !/\\d{11}/.test(phoneField.value.trim())) {
alert('请填写有效的11位手机号');
return;
}
if (!idField.value.trim()) {
alert('请填写身份证后6位');
return;
}
// 开户成功提示，并建议返回主页面领取奖励，同时把名字带回原窗口（可选：简单通知）
alert('🎉 开户成功！您的账户已开通游资打板权限资格。\\n请返回原活动弹窗，输入姓名领取一年【游资打板】权限包。');
// 尝试回传一个信号到父窗口（可选，非必须）
if (window.opener && !window.opener.closed) {
try {
// 如果原页面存在输入框，可预填姓名提升体验
const parentNameInput = window.opener.document.getElementById('accountName');
if (parentNameInput && userName && !parentNameInput.value.trim()) {
parentNameInput.value = userName;
}
} catch(err) { /* 跨域安全限制忽略 */ }
}
// 不自动关闭，让用户手动返回
});
<\/script>
</body>
</html>`;
accountWindow.document.write(mockPageHTML);
accountWindow.document.close();
// 给一个友好提示在当前弹窗: 告知已打开开户页面
showMessage('📄 已为您打开开户页面，完成开户后请返回填写姓名并领取奖励', 'info');
setTimeout(() => {
if (!rewardClaimed) {
// 不重置主要消息，只是辅助提醒, 5秒后若未领取且消息区为默认提示可保持原样
const msgDiv = document.getElementById('messageBox');
if (msgDiv && !rewardClaimed && !msgDiv.innerHTML.includes('领取专属奖励')) {
// 无需覆盖, 保留用户引导
}
}
}, 2000);
}
// ========== 关闭弹窗 & 显示重新打开按钮 ==========
function closeModal() {
modalOverlay.classList.add('hidden');
reopenBtn.classList.remove('hidden');
// 可选: 在关闭时不清醒状态，因为重新打开保留原有领取状态和姓名
}
function openModal() {
modalOverlay.classList.remove('hidden');
reopenBtn.classList.add('hidden');
// 如果已经领取过奖励，同步按钮文案和禁用状态
if (rewardClaimed) {
claimBtn.textContent = '✨ 已领取奖励 ✨';
claimBtn.style.background = '#A0C0A0';
claimBtn.disabled = true;
if (messageBox && !messageBox.innerHTML.includes('已成功领取')) {
showMessage(`✅ 您已成功领取一年【游资打板】权限包！享受顶级游资策略。`, 'success');
}
} else {
// 未领取且重新打开时重置按钮样式（防止之前意外）
claimBtn.textContent = '🎁 领取开户奖励';
claimBtn.style.background = 'linear-gradient(105deg, #F5B042 0%, #FF9500 100%)';
claimBtn.disabled = false;
claimBtn.style.opacity = '1';
// 若没有特殊消息，重置为默认
if (messageBox && !rewardClaimed && !messageBox.innerHTML.includes('输入姓名')) {
resetMessageToDefault();
}
}
// 清空错误边框
nameInput.style.borderColor = '#e2e8f0';
}
// 点击遮罩关闭弹窗
function onOverlayClick(e) {
if (e.target === modalOverlay) {
closeModal();
}
}
// 监听重新打开按钮
function bindEvents() {
closeBtn.addEventListener('click', closeModal);
reopenBtn.addEventListener('click', openModal);
modalOverlay.addEventListener('click', onOverlayClick);
claimBtn.addEventListener('click', handleClaimReward);
openAccountBtn.addEventListener('click', handleOpenAccount);
// 额外优化: 如果输入框已经填写了内容，且还未领取，可以改善体验
nameInput.addEventListener('input', function() {
if (nameInput.value.trim().length > 0 && !rewardClaimed) {
if (messageBox.innerHTML.includes('请填写') && !messageBox.innerHTML.includes('输入姓名')) {
resetMessageToDefault();
}
}
});
}
// 初始化状态，弹窗默认显示，重新打开按钮隐藏
function init() {
bindEvents();
openModal(); // 确保弹窗可见 reopen按钮隐藏
rewardClaimed = false;
claimBtn.disabled = false;
claimBtn.textContent = '🎁 领取开户奖励';
claimBtn.style.background = 'linear-gradient(105deg, #F5B042 0%, #FF9500 100%)';
nameInput.value = ''; // 清空体验
resetMessageToDefault();
}
init();
})();
</script>
</body>
</html>