Create a Modal for a Form
Hi all , I 'm trying to create a modal component that can contain my forms etc , so that on a click of a button , the form is revealed . I want the modal to be centered and I would like to create some sort of effect , so that the background content is blurred /darkened when the modal is open . I initially tried with a <dialog > component , but got stuck as I could not get it to "float " above the rest of the page . I did try the advice in https://discord.com/channels/972416966683926538/1209567011554721853/1209567011554721853 but still had no luck . ✅1That was quick . I was trying to create the blur effect by giving the dialog a semi -transparent background , but if you set any other properties it disrupts the display : absolute property . For anyone else out there , my setup now is as follows : - <dialog > - set to inherit the page 's width and height - display : flex , aligned center vertically and horizontally - position : absolute - <form > - shadow with 100rem spread , no blur , no offset I imagine this is not the best solution , but it works for now Good to see you got something that you got working ! If you are interested in another approach , I would suggest to see how it is done in the Spark One template . It is a bit more work to set up , but can be reused easily throughout your project . I just thought to share that , as I always find it useful to see how other people approach things 🙂 👍1
.jpeg/public)