<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kole UI · FullScreenModal</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="./FullScreenModal.css" />
</head>
<body>
  <div class="kole-page">
    <h2 class="kole-h2">FullScreenModal 全屏弹窗</h2>
    <p class="kole-desc">全屏展示内容，标题栏 + 关闭按钮 + 滚动内容区 + 底部操作栏。</p>

    <div class="kole-demo">
      <button class="kole-btn kole-btn--primary" id="open">打开全屏编辑</button>
    </div>
  </div>

  <div class="kole-fs-mask" id="mask" style="display:none">
    <div class="kole-fs-head">
      <span class="kole-fs-title">商品编辑（全屏）</span>
      <button class="kole-fs-close" id="close">×</button>
    </div>
    <div class="kole-fs-body">
      <h3>基础信息</h3>
      <p>此处可放置复杂表单、富文本编辑、多区块配置等内容。全屏模式便于处理信息密度高的任务。</p>
      <p>内容区可滚动，底部固定操作栏始终可见。</p>
      <h3>详细描述</h3>
      <p>支持长文、图片、视频等富媒体内容。关闭弹窗时可通过底部按钮提交或取消。</p>
    </div>
    <div class="kole-fs-foot">
      <button class="kole-btn" id="cancel">取消</button>
      <button class="kole-btn kole-btn--primary" id="ok">保存</button>
    </div>
  </div>

  <script>
    var mask = document.getElementById('mask');
    document.getElementById('open').onclick = function () { mask.style.display = 'flex'; };
    document.getElementById('close').onclick = close;
    document.getElementById('cancel').onclick = close;
    document.getElementById('ok').onclick = close;
    function close() { mask.style.display = 'none'; }
  </script>
</body>
</html>
