reactjs：提示信息公用彈層，在頁面居中位置顯示

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';

import { Modal, log, Button } from '@front-desktop/bege';

import './index.scss';

export class Popup extends Component {
    static propTypes = {
        name: PropTypes.string.isRequired,
        closeCallback: PropTypes.func,
        confirmCallbalk: PropTypes.func,
    };

    static storeInstanceThis = {};

    static open(name, content) {
        this.storeInstanceThis[`${name}_this`].setState({
            content,
        });
        Modal.open(name);
    }

    constructor(props) {
        super(props);

        if (!props.name) {
            log.warn('參數 name 未定義~');
        }

        this.state = {
            content: '',
        };
    }

    componentWillMount() {
        const { name } = this.props;

        this.constructor.storeInstanceThis[`${name}_this`] = this;
    }

    clickClose = () => {
        let { closeCallback } = this.props;
        this.closePopup();
        closeCallback();
    };

    clickConfirm = () => {
        let { confirmCallbalk } = this.props;
        this.closePopup();
        confirmCallbalk();
    };

    closePopup = () => {
        const { name } = this.props;
        Modal.close(name);
        this.setState({
            content: '',
        });
    };

    render() {
        const { content } = this.state;
        const { name } = this.props;

        return (
            <Modal className="popup-wrap" name={name}>
                <div className="popup-box">
                    <div className="popup-title">
                        <span className="title-text">提示</span>
                        <button className="close-button" onClick={this.clickConfirm} />
                    </div>
                    <div className="pop-content">{content}</div>
                    <div className="pop-bottom clear">
                        <Button
                            className="pop-button"
                            type="outline"
                            size="small"
                            onClick={this.clickConfirm}
                        >
                            確定
                        </Button>
                    </div>
                </div>
            </Modal>
        );
    }
}

Popup.defaultProps = {
    closeCallback: _.noop,
    confirmCallbalk: _.noop,
};

樣式

@charset 'utf-8';

@import "components/index";

.popup-wrap {
        position: relative;
        z-index: 110;
    .cm-modal {
        width: 330px;
        height: 150px;
        color: $light;
    }

    .popup-box {
        vertical-align: middle;
    }

    .popup-title {
        height: 40px;
        line-height: 40px;
        color: $dark;
        background-color: $light;
        border: 0;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .title-text {
        font-size: $font-size-extra-large;
        margin-left: 18px;
    }

    .close-button {
        position: relative;
        float: right;
        height: 24px;
        margin-top: 5px;
        margin-right: 10px;
        color: $light;
        cursor: pointer;
        background: none;
        border: none;
    }

    .pop-content {
        height: 70px;
        padding: 12px 30px 0px 30px;
        font-size: $font-size-extra-large;
        line-height: 21px;
        color: $gray;
        background: $light;
        text-align: center;
        word-break: break-all;
        overflow: hidden;
    }

    .pop-bottom {
        height: 40px;
    }

    .pop-button {
        float: right;
        width: 100%;
        height: 40px;
        padding: 0px;
        color: $light;
        line-height: 40px;
        font-size: $font-size-large;
        cursor: pointer;
        background: $primary-color;
        border: 0;
        border-color: $primary-color;
        border-bottom-left-radius: 9px;
        border-bottom-right-radius: 9px;
    }

    .cm-button {
        &:hover {
            background: $primary-color;
            border-color: $primary-color;
            color: $light;
        }
    }
}