弹出层

public/client.js

@@ -1,4 +1,4 @@
-import { List, ListItem, Avatar, Span } from './weigets.js'
+import { List, ListItem, Avatar, Span, Dialog } from './weigets.js'
 
 export default class ClientList {
     constructor({ channels = {}, EventListeners = {}, name: username, onexit }) {
@@ -228,6 +228,9 @@ export default class ClientList {
                     src: item.avatar ?? '/favicon.ico',
                     onclick: event => {
                         event.stopPropagation()
+                        // 点击插入一个弹出层
+                        const dialog = Dialog({})
+                        document.body.appendChild(dialog)
                     }
                 }),
                 Span({

public/weigets.js

@@ -37,3 +37,39 @@ export function Avatar(options) {
     element.onerror = () => element.src = '/favicon.ico'
     return element
 }
+
+// 弹出窗口, 高斯模糊背景, 进入离开动画过渡
+export function Dialog(options) {
+    const element = createElement(options, 'div')
+    const content = createElement({ classList: ['content'] })
+    element.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 1000;
+        width: 100%;
+        height: 100%;
+        backdrop-filter: blur(5px);
+        duration: 0.5s;
+        transition: all 0.5s;
+    `
+    content.classList.add('dialog')
+    content.style.cssText = `
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        padding: 1em;
+        background-color: #fff;
+        border-radius: 0.5em;
+        box-shadow: 0 0 1em #ccc;
+    `
+    element.appendChild(content)
+    // 点击空白处关闭
+    element.onclick = event => {
+        if (event.target === element) {
+            element.remove()
+        }
+    }
+    return element
+}