How to hide the OK and Cancel buttons of antd Modal?

When using the Modal component from Ant Design, if you want to hide the default 'Confirm' and 'Cancel' buttons, you can achieve this by setting the footer property to null. This effectively removes the button area at the bottom of the Modal, making it display nothing.

Example Code

Here is an example of how to hide the buttons using the footer property:

jsx
import React from 'react';
import { Modal, Button } from 'antd';

class App extends React.Component {
  state = { visible: false };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = () => {
    console.log('Clicked OK');
    this.setState({
      visible: false,
    });
  };

  handleCancel = () => {
    console.log('Clicked cancel');
    this.setState({
      visible: false,
    });
  };

  render() {
    return (
      <>
        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Custom Footer Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={null}  // Here we set `footer` to `null` to hide the bottom buttons
        >
          <p>Some contents...</p>
        </Modal>
      </>
    );
  }
}

export default App;

In this example, when the user clicks the 'Open Modal' button, a Modal dialog appears but does not display the 'Confirm' and 'Cancel' buttons at the bottom because we set the footer property to null.

Custom Footer Content

If you still want to display some content at the bottom of the Modal without using the default buttons, you can pass custom React elements to the footer property. For example:

jsx
<Modal
  title="Custom Footer Content"
  visible={this.state.visible}
  onOk={this.handleOk}
  onCancel={this.handleCancel}
  footer={[
    <Button key="back" onClick={this.handleCancel}>
      Return
    </Button>,
    <Button key="submit" type="primary" onClick={this.handleOk}>
      Submit
    </Button>,
  ]}
>
  <p>Some contents...</p>
</Modal>

This code replaces the default buttons with 'Return' and 'Submit' buttons, providing greater customization and flexibility.