0

So... I really want to open a modal within a modal. I've been staring at the react-overlays documentation, and I do not understand how I am supposed to implement it. It doesn't appear to be as simple as implementing a Modal tag. I get all sorts of errors. Does the backdrop matter in actually rendering it? Do I need to pass props to it?

Here is a link to the docs. https://react-bootstrap.github.io/react-overlays/api/Modal

Does anyone just have a better way to explain what one actually needs to do?

zelda3469
  • 11
  • 3
  • I dont understand what you mean by a modal in a modal. – zero298 Jun 13 '21 at 02:58
  • @zero298 I mean, I want to have an open modal, and open another modal on top of it. Like inside the modal, there is a button that opens another modal. – zelda3469 Jun 13 '21 at 03:02
  • @zero298 it looks like a styling issue, a
    inside
    maybe?
     –  Jun 13 '21 at 03:10
  • Are you dead set on using react overlays? It doesn't sound like it does a lot, but I also don't really know what they mean when they say `dialog-stacking` or `easily-pluggable animation` – Sam Jun 13 '21 at 05:49
  • @Sam I may end up using something else. I'm working under a serious time crunch. Either way, I would like to understand what's going on. – zelda3469 Jun 13 '21 at 05:58

1 Answers1

0

Since you mentioned in the comments that you may not use react-overlay If you don't need to use react-overlays, you could just have a component which looks something like

const Modal = ({children, className, ...props}) => {

    useEffect(() => {
        document.body.classList.add("no-scroll");
        return document.body.classList.remove("no-scroll")
    };

    return (
    
             <div className="modal-background">

                 <div 
                      className={`modal ${className}`} 
                      {...props}
                 >
                      {children}
                 </div>
             </div>


    );

};

.modal-background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.4);

}

.modal {
    z-index: 3;
}

.no-scroll{
    overflow: hidden;
}

The useEffect adds a no scrolling event to the document body when the ccomponent renders, an removes it when the component unmounts. The modal-background element is an overlay which would disable interation of everything else than has a z-index of less than 2. You could customize this modal to behave how you want. It probably won't do dialog-stacking or easily-pluggable animation because I don't know what that means. I'm trying to figure out how to set the focus to the first child in this question

Sam
  • 1,765
  • 11
  • 82
  • 176
  • I just realized that elements under the modal will be focussable using the tab key, so maybe `react-overlay` does more than I thought at first – Sam Jun 13 '21 at 07:16
  • I think react-overlay is what react-bootstrap is build on. I just wish the documentation was better. Also, this is a neat idea. I will keep it in mind. I ultimately decided to drop the idea of doing modals. – zelda3469 Jun 14 '21 at 16:59