How do I add a backdrop color behind my React modal screen using just CSS, specifically positioning the overlay with white at .5 opacity behind the modal?
.modal-footer-small
width: 450px
height: auto
margin: 0 auto
top: 53%
left: 0
right: 0
position: fixed
z-index: 1
box-shadow: -3px 0 5px rgba(100,100,100,0.2), 3px 0 5px rgba(100,100,100,0.2)
background: white
padding: 10px 40px
> .ui-modal-body
font-family: 'Flexo'
font-size: 12px
margin: 0 auto
height: auto
min-height: 160px
max-height: 250px
overflow: scroll
.modal-anim-enter
opacity: 0.00
transform: translateY(100%)
&.modal-anim-enter-active
opacity: 1
transform: scale(1)
transition: all .5s
.modal-anim-leave
opacity: 1
transform: translateY(100%)
transition: all .5s
&.modal-anim-leave-active
opacity: 0.00
transform: translateY(100%)
The modal component code is provided below:
const UiModal = React.createClass({
getInitialState(){
return { isOpen: false };
},
openModal() {
this.setState({ isOpen: true });
},
closeModal() {
this.setState({ isOpen: false });
},
render() {
const { openBtnText, header, subHeader, body, footer, footerText, actionBtnText='See More', closeBtnText='Cancel', placement='central', handleSaveAction } = this.props;
return (
<div>
<div className="button" onClick={this.openModal}>{ this.props.openBtnText }</div>
<div>
<ReactCSSTransitionGroup transitionName="modal-anim" transitionLeaveTimeout={500} transitionEnterTimeout={500} transitionAppear={true}
transitionAppearTimeout={500}>
{ this.state.isOpen &&
<div className={`ui-modal-${placement}`} key={placement}>
<div className="ui-modal-header">
/>
</div>
<div className="ui-modal-body">
{body}
</div>
<div className="ui-modal-footer">
<div className="ui-modal-footer-button-group">
<div className="ui-modal-footer-button-close" onClick={this.closeModal}>{closeBtnText}</div>
<div className="ui-modal-footer-button button" onClick={this.handleSave}>{actionBtnText}</div>
</div>
<div className="ui-modal-footer-text">{footerText}</div>
</div>
</div>
}
</ReactCSSTransitionGroup>
</div>
</div>
);
}
});
export default UiModal;