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