scss
.ReactModalPortal>div{
opacity: 0;
}
.ReactModalPortal .ReactModal__Overlay
{
// opacity: 1;
transition: opacity 1000ms ease-in;
}
.ReactModalPortal .ReactModal__Overlay--after-open
{
opacity: 0;
}
.ReactModal__Overlay--before-close
{
opacity: 1;
}
modal.js
import React from 'react';
import Modal from 'react-modal';
const OptionModal = (props)=>(
<div>
<Modal
isOpen={!!props.content}
// onAfterOpen={this.afterOpenModal}
onRequestClose={props.deleteContent}
// style={customStyles}
closeTimeoutMS={1000}
// ariaHideApp={false}
contentLabel="hey"
>
<h1>You should do this</h1>
<p>{props.content}</p>
<button onClick={props.deleteContent}>OKAY</button>
</Modal>
</div>
);
export default OptionModal;
problem is:
on adding this css to a file the model stops appearing to the sceen(on clicking button)
but in the inspect view i can see the class added