search

davidtheclark / react-aria-modal

A fully accessible React modal built according WAI-ARIA Authoring Practices
http://davidtheclark.github.io/react-aria-modal/demo/
MIT License
1.04k stars 96 forks source link

Relative css positioning to parent DOM element #25

Closed vnglst closed 7 years ago

vnglst commented 7 years ago

I'm trying to create a popup modal with a positioning relative to the button that's activating it, similar to the popup you see on Github, when you click on your profile picture.

schermafdruk 2017-03-29 17 04 24

Is that possible with react-aria-modal?

davidtheclark commented 7 years ago

@vnglst: Yep. The positioning of the element has nothing to do with the library, though: it's all about the CSS you yourself use.

vnglst commented 7 years ago

Thanks for the quick repley @davidtheclark!

I'm trying to position the Modal relative to it's parent (the button) but it seems to me that the component creates a new parent div (id="react-aria-modal-dialog") that's positioned over the screen. Relative positioning is then calculated relative to that div and not to the parent button... but maybe I'm doing something wrong.

I'm trying to recreate this simple example using the React-Aria-Modal component instead of the popup span:

https://www.w3schools.com/code/tryit.asp?filename=FE5XZ2MOBV11

Am I missing something here? Thanks in advance for you help!

vnglst commented 7 years ago

Or should I be using https://github.com/davidtheclark/react-aria-menubutton instead?

davidtheclark commented 7 years ago

Oh @vnglst, my mistake: I misread and thought this was the react-aria-menubutton repo!

Yeah, I think you should give this library a try 👍 . I don't think the ARIA attributes for a modal are appropriate for the use-case you've depicted above.

vnglst commented 7 years ago

That's completely understandable, since that would be the component to use. Giving it a try right now, works great. Relative positioning is no issue there! Thanks!