用CSS创建背景/覆盖模式

Question

我有一个模式，我已经在React中使用css创建，ReactTranstionGroupCSS，并且只有当模态显示时需要在模态屏幕后面添加背景颜色。我怎样才能用CSS来做到这一点？我只需要定位覆盖层（只需要白色在.5不透明度）后面的模态屏幕。

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

这里是模态分量：

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

没有重组你的HTML，我会用.modal-footer-small作为覆盖和位置.ui-modal-body它里面。

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