<!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 · AlertModal（普通 H5）</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="AlertModal.css" />
  <style>body{margin:0;padding:24px;background: var(--kole-color-page-bg);}</style>
</head>
<body>
  <button id="open" data-type="info">查看提示</button>
  <button id="openSuccess" data-type="success">成功提示</button>
  <button id="openError" data-type="error">操作失败</button>
  <button id="openWarning" data-type="warning">警告提示</button>

  <div class="kole-modal-mask" id="mask" style="display:none">
    <div class="kole-alert" id="alertBox">
      <div class="kole-alert-head">
        <span class="kole-alert-icon">i</span>
        <div class="kole-alert-title">系统升级通知</div>
      </div>
      <div class="kole-alert-content">本周六 02:00-04:00 将进行系统维护，期间服务不可用，请提前安排。</div>
      <div class="kole-alert-footer"><button class="kole-alert-btn" id="ok">知道了</button></div>
    </div>
  </div>

  <script>
    var mask = document.getElementById('mask');
    var ICONS = { success: '✓', error: '✕', warning: '!', info: 'i' };
    var TITLES = { success: '操作成功', error: '操作失败', warning: '警告提示', info: '系统升级通知' };
    function showAlert(type) {
      var box = document.getElementById('alertBox');
      box.className = 'kole-alert is-' + type;
      box.querySelector('.kole-alert-icon').textContent = ICONS[type] || 'i';
      box.querySelector('.kole-alert-title').textContent = TITLES[type] || '提示';
      mask.style.display = 'flex';
    }
    document.getElementById('open').onclick = function () { showAlert('info'); };
    document.getElementById('openSuccess').onclick = function () { showAlert('success'); };
    document.getElementById('openError').onclick = function () { showAlert('error'); };
    document.getElementById('openWarning').onclick = function () { showAlert('warning'); };
    document.getElementById('ok').onclick = function () { mask.style.display = 'none'; };
    mask.addEventListener('click', function (e) { if (e.target === mask) mask.style.display = 'none'; });
  </script>
</body>
</html>
