ReactJs - Cannot open popup in modal window-CodePudding

I use react-bootstrap for modal and reactjs-popup for popup. I want to open a popup by clicking a button in a modal window but the popup is opening in the behind of modal window. I changed z-index of the popup but that didnt solve the issue.

import Popup from "reactjs-popup";
import {Modal, Button} from "react-bootstrap";    

const SettingsModal = ({ handleClose, show, projectName, projectId}) => {
    
        ...
       return (
                <Modal show={show} onHide={handleClose} centered>
                    ...
    
                        <Popup trigger={ <Button variant="outline-secondary" >
                            Add Pose
                        </Button>
                        }
                               position="right bottom"
                        >
                            <div style={{backgroundColor:"gold"}}>Popup</div>
                            <button>add</button>
                        </Popup>
                        
                    </div>
    
                </Modal>
    
        );
    };

CodePudding user response：

I wouldn't recommend to recuce the z-Index of any bootstrap component - there is a whole system with compatible numbers. If you change one, you potentially break the system. Instead I would reduce the z-Index of the popup:

The z-index of modal BACKDROP is 1050
The z-index of reactjs popip is 999

According to the styling page, you can either create your own class and attach it or just target existing reactjs popup classes:

https://react-popup.elazizi.com/css-styling

.popup-content {
  z-index: 1055 !important;
}

Please find a working codesandbox here: https://codesandbox.io/s/admiring-surf-eoc8v4

CodePudding user response：

Use this as a reference. You will need to reduce the z-index of modal-backdrop since you want the popup (z-index - 999) above the modal (z-index - 1050)

https://codesandbox.io/s/elegant-lamport-p25055?file=/src/styles.css

Or increase the z-index of the popup to be more than 1050 as suggested by @Igor