popup page

lib/ui.js

@@ -4,6 +4,7 @@ import { createCheckbox, resolveCheckbox } from "./ui/checkbox";
 import { setTooltip, resolveTooltip } from "./ui/tooltip";
 import Dropdown from "./ui/dropdown";
 import Grid from "./ui/grid";
+import { createPopup } from "./ui/popup";
 
 export {
   // icon
@@ -18,5 +19,7 @@ export {
   // dropdown
   Dropdown,
   // grid
-  Grid
+  Grid,
+  // popup
+  createPopup
 }

lib/ui/popup.html

@@ -0,0 +1,28 @@
+<div>
+    <h1>popup</h1>
+    <hr />
+    <p>
+        创建弹出窗口。
+    </p>
+    <hr />
+    <h2>示例</h2>
+    <div id="popup-sample">
+        <button id="button-popup">Popup</button>
+    </div>
+    <script type="text/javascript">
+        const ui = window['lib-ui'];
+
+        document.querySelector('#button-popup').addEventListener('click', () => {
+            const popup = ui.createPopup('title', 'content',
+                { text: 'Ok', trigger: () => true });
+            document.body.appendChild(popup);
+            setTimeout(() => popup.style.opacity = 1);
+        });
+    </script>
+    <style type="text/css">
+        :root {
+            --title-bg-color: lightgray;
+            --title-color: #333;
+        }
+    </style>
+</div>