模态框组件

这是一个 AI 大模型评测用例，下面将详细介绍测试内容和各模型的表现。

基本信息

  • 用例名称：模态框组件
  • 测试类型：网页生成
  • 评测维度：交互组件
  • 参与评测的模型数：163 个

系统提示词（System Prompt）

你是一名资深前端开发工程师，擅长使用原生 HTML、CSS 和 JavaScript 构建交互式 UI 组件。 回答要求： 1. 所有代码必须整合在单个 HTML 文件中，包含 <style> 和 <script> 标签，可直接在浏览器中运行。 2. 代码结构清晰，HTML 语义化，CSS 与 JS 各司其职，避免使用全局变量污染。 3. 优先保证核心交互功能的正确性与完整性，视觉样式简洁美观即可。 4. 包含基础的 CSS Reset，确保跨浏览器显示一致。 5. 代码需包含必要的注释，便于理解关键逻辑。

用户提示词（User Prompt）

# 模态框组件展示页面（基础版） ## 要求 - 所有代码（HTML、CSS、JavaScript）必须写在一个 HTML 文件中 - 直接输出完整的、可独立运行的 HTML 代码 ## 功能说明 请实现一个模态框组件展示页面，包含以下 **7 项核心功能**： 1. **打开模态框**：点击对应按钮触发打开 2. **内容结构**：模态框包含标题区、内容区、底部操作按钮（确认 + 取消） 3. **遮罩层关闭**：点击模态框外部的半透明遮罩层可关闭 4. **X 按钮关闭**：模态框右上角提供关闭按钮 5. **ESC 键关闭**：按下键盘 ESC 键可关闭当前模态框 6. **背景锁定**：模态框打开时，页面背景禁止滚动 7. **动画效果**：模态框打开与关闭时有淡入/淡出或缩放过渡动画 ## 展示内容 页面需展示以下 **三种类型** 的模态框，每种对应一个触发按钮： - **信息模态框**：展示一段普通提示信息，底部有「知道了」按钮 - **删除确认对话框**：提示用户确认删除操作，底部有「确认删除」（危险色）和「取消」按钮 - **登录表单模态框**：包含用户名输入框、密码输入框，底部有「登录」和「取消」按钮 ## 视觉要求 - 页面整体布局居中，三个触发按钮排列整齐 - 遮罩层为半透明深色背景 - 模态框居中显示，有圆角和阴影 - 三种模态框在视觉上有所区分（如标题颜色或图标） - 表单输入框样式规范，有 focus 状态 请直接输出完整的 HTML 代码。

各模型评测结果

  1. 第 1：qwen3.6-plus-preview，得分 98.0 分 — 查看该模型的详细评测结果
  2. 第 2：Claude Opus 4.6，得分 95.33 分 — 查看该模型的详细评测结果
  3. 第 3：OpenAI: GPT-5 Mini，得分 95.1 分 — 查看该模型的详细评测结果
  4. 第 4：MiniMax-M2.5，得分 95.1 分 — 查看该模型的详细评测结果
  5. 第 5：qwen3.5-omni-plus，得分 94.7 分 — 查看该模型的详细评测结果
  6. 第 6：doubao-seed-2-0-code，得分 94.6 分 — 查看该模型的详细评测结果
  7. 第 7：glm-4.7，得分 94.5 分 — 查看该模型的详细评测结果
  8. 第 8：GLM-5.1，得分 94.5 分 — 查看该模型的详细评测结果
  9. 第 9：kimi-k2.6，得分 94.3 分 — 查看该模型的详细评测结果
  10. 第 10：Anthropic: Claude Sonnet 4.6，得分 93.3 分 — 查看该模型的详细评测结果
  11. 第 11：mimo-v2-flash，得分 93.1 分 — 查看该模型的详细评测结果
  12. 第 12：qwen3-coder-plus，得分 93.0 分 — 查看该模型的详细评测结果
  13. 第 13：GLM-5v-turbo，得分 92.9 分 — 查看该模型的详细评测结果
  14. 第 14：qwen3.5-omni-flash，得分 92.8 分 — 查看该模型的详细评测结果
  15. 第 15：Google: Gemma 4 31B，得分 92.3 分 — 查看该模型的详细评测结果
  16. 第 16：Google: Gemma 4 26B A4B ，得分 92.1 分 — 查看该模型的详细评测结果
  17. 第 17：Claude Opus 4 7，得分 91.8 分 — 查看该模型的详细评测结果
  18. 第 18：OpenAI: gpt-oss-120b，得分 91.7 分 — 查看该模型的详细评测结果
  19. 第 19：GPT-5.2，得分 91.2 分 — 查看该模型的详细评测结果
  20. 第 20：Anthropic: Claude Haiku 4.5，得分 90.0 分 — 查看该模型的详细评测结果
  21. 第 21：Google: Gemini 3 Flash Preview，得分 89.1 分 — 查看该模型的详细评测结果
  22. 第 22：Elephant，得分 88.3 分 — 查看该模型的详细评测结果
  23. 第 23：glm-5-turbo，得分 88.0 分 — 查看该模型的详细评测结果
  24. 第 24：OpenAI: GPT-5.4，得分 88.0 分 — 查看该模型的详细评测结果
  25. 第 25：OpenAI: gpt-oss-20b，得分 87.5 分 — 查看该模型的详细评测结果
  26. 第 26：Google: Gemini 3.1 Pro Preview，得分 86.3 分 — 查看该模型的详细评测结果
  27. 第 27：Meituan: LongCat Flash Chat，得分 85.8 分 — 查看该模型的详细评测结果
  28. 第 28：qwen3.5-27b，得分 85.6 分 — 查看该模型的详细评测结果
  29. 第 29：doubao-seed-2-0-lite，得分 85.1 分 — 查看该模型的详细评测结果
  30. 第 30：StepFun: Step 3.5 Flash，得分 85.1 分 — 查看该模型的详细评测结果
  31. 第 31：xAI: Grok 4.1 Fast，得分 84.8 分 — 查看该模型的详细评测结果
  32. 第 32：mimo-v2-omni，得分 84.5 分 — 查看该模型的详细评测结果
  33. 第 33：xAI: Grok 4.20 Beta，得分 84.3 分 — 查看该模型的详细评测结果
  34. 第 34：qwen3.5-35b-a3b，得分 84.1 分 — 查看该模型的详细评测结果
  35. 第 35：MiniMax-M2.1，得分 82.9 分 — 查看该模型的详细评测结果
  36. 第 36：doubao-seed-1-8，得分 82.1 分 — 查看该模型的详细评测结果
  37. 第 37：qwen3-max，得分 81.2 分 — 查看该模型的详细评测结果
  38. 第 38：mimo-v2-pro，得分 81.1 分 — 查看该模型的详细评测结果
  39. 第 39：kimi-k2.5，得分 81.1 分 — 查看该模型的详细评测结果
  40. 第 40：OpenAI: GPT-4o-mini，得分 80.9 分 — 查看该模型的详细评测结果
  41. 第 41：doubao-seed-1-6，得分 80.8 分 — 查看该模型的详细评测结果
  42. 第 42：OpenAI: GPT-5 Nano，得分 80.1 分 — 查看该模型的详细评测结果
  43. 第 43：Qwen: Qwen3.5-9B，得分 80.0 分 — 查看该模型的详细评测结果
  44. 第 44：MiniMax-M2.7，得分 79.3 分 — 查看该模型的详细评测结果
  45. 第 45：doubao-seed-2-0-mini，得分 78.7 分 — 查看该模型的详细评测结果
  46. 第 46：NVIDIA: Nemotron 3 Super (free)，得分 77.5 分 — 查看该模型的详细评测结果
  47. 第 47：doubao-seed-2-0-pro，得分 77.3 分 — 查看该模型的详细评测结果
  48. 第 48：Grok 4，得分 75.4 分 — 查看该模型的详细评测结果
  49. 第 49：Google: Gemini 2.5 Flash Lite，得分 75.15 分 — 查看该模型的详细评测结果
  50. 第 50：doubao-seed-1-6-flash，得分 73.6 分 — 查看该模型的详细评测结果
  51. 第 51：hunyuan-large，得分 73.5 分 — 查看该模型的详细评测结果
  52. 第 52：hunyuan-pro，得分 64.3 分 — 查看该模型的详细评测结果
  53. 第 53：hunyuan-turbo，得分 63.2 分 — 查看该模型的详细评测结果
  54. 第 54：Mistral: Mistral Nemo，得分 54.8 分 — 查看该模型的详细评测结果
  55. 第 55：Meta: Llama 3.3 70B Instruct，得分 44.2 分 — 查看该模型的详细评测结果
题目
模型排行
加载中…
模型评分
加载中…