Introduce a basic modal implementation with QTModal

2026-01-13 16:17:57 +00:00 · 2025-06-05 13:36:55 -07:00
parent 31ae08cd60
commit 32a4d7454f
3 changed files with 27 additions and 2 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/qtmodal"></script>
+</head>
+<body>
+
+    <script type="module">
+        QTModal.show()
+    </script>
+
+</body>
+</html>
--- a/index.js
+++ b/index.js
@@ -1 +1,12 @@
+import { $ } from 'https://cdn.jsdelivr.net/npm/qthtml';

+var QTModal = {
+    html: `
+    <div id="qtmodal" style="position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);">
+      <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:20px; background:#fff;">
+        Loading...
+      </div>
+    </div>`,
+    show: () => $(`body`).inject(QTModal.html),
+    hide: () => $('#qtmodal')?.remove()
+}
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "",
+  "name": "qtmodal",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
@@ -12,7 +12,6 @@
  "dependencies": {
  },
  "devDependencies": {
-    "esbuild": "^0.20.0"
  },
  "engines": {
    "node": ">=18.0.0"