React non-modal "modal"?

user_18286225 0
Viewed 43

(Forewarning: I'm new to React, so I'm not sure all the vocab I'm using is correct)

I want something that's like a modal in that it pops up over the background, but I don't want it to lock the background/make it greyed out/make the background non-interactable (i.e., I want to be able to have the "modal" open but then click on the background/copy and paste something from that background into the "modal"). I've looked over some pre-built React components, but not seeing anything that fits the bill. Looking for any advice/pointers on this front. TIA!

react-native reactjs frontend
1 Answers

This is more of a css question really. Using react you will want a div of height h and width w then you can position it in the center of the screen with a position: fixed you can then use a z-index to make sure it is over all the content is the screen and leave the rest of the page interactive.

function App(){
    const [isOpen, setIsOpen] = useState(false);
    return (
        <div>
            <h1>Some content</h1>
            <button onClick={()=>setIsOpen(true)}>Open Modal</button>
            <div className="willFloat" style={{display: isOpen?'block':'none', height: '110px', width: '150px', position: 'fixed', zIndex: 1, top: '50%', left: '50%'}}>
                <p>This will float in the center</p>
                <button onClick={()=>setIsOpen(false)}>Close Modal</button>
            </div>
        </div>
    );
}

This is of course just an example and uses quite a bit of inline styling and onClick function handling which you will want to separate out for any real projects.

With some additional styling you can get this div to do whatever you want.
Learn some more html/css and it will make your life easier as well.
Best

user_101083320
Related