Erstellen eines Hintergrunds/Overlays hinter Modal mit CSS

Question

Ich habe ein Modal, das ich in React mit css, ReactTranstionGroupCSS erstellt habe, und brauche nur dann eine Hintergrundfarbe hinter dem modalen Bildschirm, wenn das Modal angezeigt wird. Wie kann ich das nur mit CSS machen? Ich muss nur die Überlagerung positionieren (nur Weiß bei .5 Opazität) hinter der modalen Bildschirm.

.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%) 

Hier ist die modale Komponente:

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; 

Answer 1

Ohne Ihre HTML Restrukturierung, ich .modal-footer-small als Overlay und Position .ui-modal-body in der es verwenden würde.

.ui-modal-body { 
 
    font-family: 'Flexo'; 
 
    font-size: 12px; 
 
    margin: 0 auto; 
 
    height: auto; 
 
    min-height: 160px; 
 
    max-height: 250px; 
 
    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; 
 
} 
 

 
.modal-footer-small { 
 
    background: rgba(255, 255, 255, 0.5); 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
body { 
 
    background: url("http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg"); 
 
}

<div class="modal-footer-small"> 
 
    <div class="ui-modal-body">modal</div> 
 
</div>