122 lines
5.0 KiB
Plaintext
122 lines
5.0 KiB
Plaintext
component Modal {
|
|
props {
|
|
@event onConfirmed = function
|
|
}
|
|
|
|
state isOpen = false
|
|
|
|
functions {
|
|
function confirmed() {
|
|
isOpen = false;
|
|
if(onConfirmed) {
|
|
onConfirmed()
|
|
}
|
|
}
|
|
}
|
|
|
|
view {
|
|
<main
|
|
class="flex min-h-screen items-center justify-center bg-[var(--wire-color-background)] p-6"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="rounded-xl bg-[var(--wire-color-primary)] px-5 py-3 font-semibold text-white shadow-lg transition hover:opacity-90"
|
|
@click="isOpen = true"
|
|
>
|
|
Open Transparent Modal
|
|
</button>
|
|
|
|
<div
|
|
class:hidden="isOpen == false"
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black/20 p-4 backdrop-blur-sm"
|
|
>
|
|
<div
|
|
class="relative w-full max-w-lg overflow-hidden rounded-3xl border border-white/20 bg-white/10 p-6 shadow-2xl backdrop-blur-2xl dark:border-white/10 dark:bg-black/20"
|
|
>
|
|
<div
|
|
class="pointer-events-none absolute -right-20 -top-20 h-48 w-48 rounded-full bg-[var(--wire-color-primary)]/30 blur-3xl"
|
|
>
|
|
</div>
|
|
|
|
<div
|
|
class="pointer-events-none absolute -bottom-20 -left-20 h-48 w-48 rounded-full bg-cyan-500/20 blur-3xl"
|
|
>
|
|
</div>
|
|
|
|
<div
|
|
class="relative z-10"
|
|
>
|
|
<div
|
|
class="mb-6 flex items-start justify-between gap-4"
|
|
>
|
|
<div>
|
|
<p
|
|
class="mb-2 text-sm font-semibold uppercase tracking-wider text-[var(--wire-color-primary)]"
|
|
>
|
|
Transparent Modal
|
|
</p>
|
|
|
|
<h2
|
|
class="text-2xl font-bold text-[var(--wire-color-text)]"
|
|
>
|
|
Welcome to WRNexusJS
|
|
</h2>
|
|
|
|
<p
|
|
class="mt-2 text-sm leading-6 text-[var(--wire-color-text-muted)]"
|
|
>
|
|
This modal uses a transparent glass background with blur,
|
|
soft borders, and theme-aware colors.
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
aria-label="Close modal"
|
|
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-white/20 bg-white/10 text-xl text-[var(--wire-color-text)] transition hover:bg-white/20 dark:border-white/10 dark:bg-black/20 dark:hover:bg-black/30"
|
|
@click="isOpen = false"
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
class="rounded-2xl border border-white/20 bg-white/10 p-4 backdrop-blur-lg dark:border-white/10 dark:bg-black/10"
|
|
>
|
|
<p
|
|
class="text-sm text-[var(--wire-color-text-muted)]"
|
|
>
|
|
You can place forms, confirmation messages, account details,
|
|
images, or any other component inside this modal.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="rounded-xl border border-white/20 bg-white/10 px-5 py-2.5 font-medium text-[var(--wire-color-text)] transition hover:bg-white/20 dark:border-white/10 dark:bg-black/20 dark:hover:bg-black/30"
|
|
@click="isOpen = false"
|
|
>
|
|
Cancel
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="rounded-xl bg-[var(--wire-color-primary)] px-5 py-2.5 font-semibold text-white shadow-lg transition hover:opacity-90"
|
|
@click="confirmed()"
|
|
>
|
|
Continue
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
}
|
|
|
|
style {
|
|
}
|
|
}
|