CODEWITHSUNDEEP
reactjscss-positiontailwind-css
Jack Kay
Jack Kay

Reputation: 39

Modal positioned to button positioning instead of remaining at the middle of page

I am stuck, I am trying to open a modal in the center of the screen when a red button is clicked. I made the button into a component called ReqButton and then imported a component called Modal which opens and closes the Modal. It opens and closes (cannot tell because of positioning issue), but when I import the ReqButton into the Hero and the NavBar component it is being positioned according to the buttons positioning. Also, not sure why the hero-cta button is diagonal from the btn-ghost.

Here is the page on Netlify: https://spontaneous-seahorse-b6c325.netlify.app/ Click on the two buttons to see what I am talking about.

For some reason the code looks terrible on StackOverflow, so here is my github: https://github.com/jackkayak/MVVR-react-tailwind-router

Upvotes: 0

Views: 792

Answers (1)

Artist
Artist

Reputation: 39

It looks like your modal is positioned differently each time depending on where your button is. This is because one of the parent containers your button is in has a different position attribute each time. Since your modal has positions absolute, each time it jumps to the position of one parent and aligns its position with its. In the current state of your code, the easiest way to solve this is by modifying your modal component, adding a wrapper with a fixed position and properly positioning its contents depending on your needs. To make your modal component more responsive I recommend using context.

Upvotes: 1

Related Questions