multipleofnpm/qtmodal
1
0
Fork 0
mirror of https://github.com/multipleofnpm/qtmodal.git synced 2026-01-14 00:27:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Introduce a basic modal implementation with QTModal

Browse Source
This commit is contained in:
sss
2025-06-05 13:36:55 -07:00
parent 31ae08cd60
commit 32a4d7454f
3 changed files with 27 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
index.html Normal file
View File

@@ -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>

11
index.js
View File

@@ -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()
}

3
package.json
View File

@@ -1,5 +1,5 @@
{ {
"name": "", "name": "qtmodal",
"version": "0.1.0", "version": "0.1.0",
"description": "", "description": "",
"main": "index.js", "main": "index.js",
@@ -12,7 +12,6 @@
"dependencies": { "dependencies": {
}, },
"devDependencies": { "devDependencies": {
"esbuild": "^0.20.0"
}, },
"engines": { "engines": {
"node": ">=18.0.0" "node": ">=18.0.0"