Question

我有一个使用css，ReactTranstionGroupCSS在React中创建的模态，并且只有在模式显示时才需要在模态屏幕后面添加背景颜色。我怎么能用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>

使用CSS在模态后面创建背景/叠加

1 个答案: