<div>
    {visible && <div className="ant-modal-root">
        <div className="ant-modal-mask"></div>
        <div className="ant-modal-wrap">
            <div className="ant-modal" style={{ width: state.width + 'px' }}>
                <div className="ant-modal-content">
                    {title && <button type="button" className="ant-modal-close" onClick={this.handleClose}>
                        <span className="ant-modal-close-x">
                            <antd-icon type="CloseOutlined"></antd-icon>
                        </span>
                    </button>}
                    {title && <div className="ant-modal-header">
                        <div className="ant-modal-title">{title}</div>
                    </div>}
                    <div className="ant-modal-body">{children}</div>
                    {footer === undefined && <div className="ant-modal-footer">
                        <div>
                            <antd-button onClick={this.onCancel}>{state.cancelText}</antd-button>
                            <antd-button type="primary" onClick={this.onOk}>{state.okText}</antd-button>
                        </div>
                    </div>}
                    {footer !== undefined && <div className="ant-modal-footer">
                        <antd-slot content="{{footer}}" context="antdModal.getContext().$parent"></antd-slot>
                    </div>}
                </div>
            </div>
        </div>
    </div>}
</div>