<div>
    {visible && <div className="ant-modal-root">
        <div className="ant-modal-mask" style={{ zIndex: 1200 }}></div>
        <div className="ant-modal-wrap" style={{ zIndex: 1200 }}>
            <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">
                            <es-icon type="CloseOutlined"></es-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>
                            <es-button onClick={this.onCancel}>{state.cancelText}</es-button>
                            <es-button type="primary" onClick={this.onOk}>{state.okText}</es-button>
                        </div>
                    </div>}
                    {footer !== undefined && <div className="ant-modal-footer">
                        <es-slot content="{{footer}}" context="esModal.getContext().$parent"></es-slot>
                    </div>}
                </div>
            </div>
        </div>
    </div>}
</div>