Is there a way I can close Modal without using the default Buttons on ANTD?

Question

So I am new to ReactJS and I'm using ANT Design and currently playing around with their Modal. I want to know if we can close the Modal without using the OK and Cancel buttons.

So I removed these buttons. And created a Button inside the config. I want to close the Modal using that Button. Any help would be great! Thanks in advance!

Here is my code.

const {  Modal, Button  } = antd;

const ReachableContext = React.createContext();
const UnreachableContext = React.createContext();

const handleButtonOnClick = () => {
  console.log('this button was clicked');
}

const config = {
  visible: false,
  title: 'Use Hook!', icon: null,
  okButtonProps: { style: { display: 'none' } },
  // cancelButtonProps: { style: { display: 'none' } },
  content: (
    <div>
      <ReachableContext.Consumer>
        {sample => (
          <Button
            type='primary'
            block
          >
            Click Me Button
            // IS THERE A FUNCTION THAT I CAN CLOSE THE MODAL USING THIS BUTTON?
          </Button>
         )}
      </ReachableContext.Consumer>
    </div>
  ),
};

const App = () => {
  const [modal, contextHolder] = Modal.useModal();
  return (
    <ReachableContext.Provider value={modal}>
      <Button
        onClick={() => {
          modal.confirm(config);
        }}
      >
        Confirm
      </Button>
      {contextHolder} 
    </ReachableContext.Provider>
  );
};

ReactDOM.render(<App />, mountNode);

blueseal · Answer 1 · 2020-03-09T08:06:26.470

This is how I close/show the Modal. I don't use Ok or cancel button. If the prop showForm is true then Modal will show up otherwise not.

import React, { Component } from "react";
import { connect } from "react-redux";
import * as actions from "../../actions";

import { Modal, Icon } from "antd";

class FormContainerModal extends Component {
  state = {};

  render() {
    const { showForm } = this.props;
    return (
      <>
        <Modal
          title={
            <div>
              Title
            </div>
          }
          destroyOnClose={true}
          footer={null}
          centered
          maskClosable={false}
          onCancel={this.props.closeModal}
          visible={showForm} //it will close the modal if showForm is false
          width="950px"
        >
            <div>
              My Content
            </div>
        </Modal>
      </>
    );
  }
}

const mapStateToProps = state => {
  return {
    showForm: state.form.showForm
  };
};

export default connect(mapStateToProps, actions)(FormContainerModal);

In your case, you can change the boolean value of showForm upon button click.

           <Button
            type='primary'
            block
           onClick={()=>this.setState({showForm: false})} //here make showForm to false to close the modal
          >
            Close the Modal
          </Button>

score 1 · Answer 2 · answered Oct 25 '21 at 20:02

1

If you know you only have one modal open (or don't mind also closing any additional open modals), you can call the class method

Modal.destroyAll()

from anywhere and it will do the trick.

answered Oct 25 '21 at 20:02

biomiker

3,108
1
29
26

score 0 · Answer 3 · answered Jun 25 '21 at 08:17

You can trigger the destruction of the modal using a button within the modal content like so:

const modal = Modal.info();

const closeModal = () => modal.destroy();

modal.update({
  title: 'Updated title',
  content: (
    <Button onClick={closeModal}>Destroy</Button>
  ),
});

Is there a way I can close Modal without using the default Buttons on ANTD?

3 Answers3