popup page

css/popup.scss

@@ -51,6 +51,7 @@ $buttonHeight: 36px;
                 padding: 4px;
                 cursor: pointer;
                 box-sizing: border-box;
+                transition: opacity .12s ease;
 
                 &:hover {
                     opacity: .8;
@@ -75,10 +76,13 @@ $buttonHeight: 36px;
                 margin-left: 8px;
                 border: none;
                 height: $buttonHeight;
+                line-height: $buttonHeight;
                 padding: 0 8px;
                 min-width: 60px;
+                text-align: center;
                 cursor: pointer;
                 background-color: var(--title-bg-color);
+                transition: opacity .12s ease;
 
                 &:hover {
                     opacity: .8;

css/ui.scss

@@ -2,3 +2,4 @@
 @import './dropdown.scss';
 @import './tooltip.scss';
 @import './grid.scss';
+@import './popup.scss';

index.html

@@ -22,6 +22,7 @@
           <li data-page="lib/ui/tooltip.html">tooltip</li>
           <li data-page="lib/ui/dropdown.html">dropdown</li>
           <li data-page="lib/ui/grid.html">grid</li>
+          <li data-page="lib/ui/popup.html">popup</li>
         </ol>
       </li>
       <li class="title">lib-utility</li>

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>