Currently, I am working on integrating the react-modal NPM library into a React Typescript project. The issue I am facing is that the modal occupies the entire width of the screen by default, with padding included. My goal is to have it display as a small popup in the center of the screen, yet I am struggling to achieve this as it seems to use absolute positioning by default.
Could someone please provide guidance on how I can modify the inline style here to ensure that the content section is positioned centrally within the overlay?
<ReactModal
isOpen={this.state.dialogOpen}
contentLabel="Example Modal"
// portalClassName="ReactModalPortal"
// overlayClassName="ReactModal__Overlay"
// className="ReactModal__Content"
// bodyOpenClassName="ReactModal__Body--open"
shouldCloseOnEsc={true}
shouldReturnFocusAfterClose={true}
role="dialog"
onRequestClose={this.handleCloseModal}
shouldCloseOnOverlayClick={false}
// tslint:disable
parentSelector={() => document.body}
style={{
overlay: {
background: "rgba(0, 0, 0, 0.45)"
},
content: {
width: 600,
height:250,
position: "absolute",
top: "30%",
left: "30%",
right: "40px",
border: "1px solid #999",
background: "rgba(54, 58, 67, 1)",
overflow: "auto",
WebkitOverflowScrolling: "touch",
borderRadius: "6px",
outline: "none",
padding: "20px"
}
}}