legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: enhance PopupModal with improved transition effects and backdrop styling

Browse Source
This commit is contained in:
Ardeman 2025-02-22 16:08:40 +08:00
parent 54faf57262
commit 9e50f8c7dc
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/popup/modal.tsx
View File

@ -18,10 +18,14 @@ export default function PopupModal({
open={isOpen} open={isOpen}
onClose={onClose} onClose={onClose}
className="relative z-50" className="relative z-50"
transition
> >
<DialogBackdrop className="fixed inset-0 bg-black/30" /> <DialogBackdrop
className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
transition
/>
<div className="fixed inset-0 flex w-screen items-center justify-center p-4"> <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
<DialogPanel className="max-w-lg space-y-4 rounded-lg bg-white p-8 shadow-lg"> <DialogPanel className="max-w-lg space-y-4 rounded-lg bg-white p-8 shadow-lg duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0">
<div className="relative">{children}</div> <div className="relative">{children}</div>
</DialogPanel> </DialogPanel>
</div> </div>