hide Cancel and Ok button but keep X button working antd Modal?-CodePudding

im using the antd model to popup a visual. I need to remove the cancel and Ok button but keep the X button working so that i can close the popup using that button.

i removed the Cancel and Ok button using below code but after that clicking on X is not working and can't close

            <Modal
                title="Lost Assets"
                visible={isModalOpen}
                width="95%"
                style={{ top: "20px" }}
                bodyStyle={{ height: "calc(100vh - 170px)" }}
                footer={null}

How can i make the X button workable and make it a little bit large in size?

CodePudding user response：

If you check the antd documentation for the Modal they have a prop called closable that, if you set to true, it will render the "x" button. To style it you just have to target it's css className or you can use your own "x" component by using the closeIcon prop on the Modal as well. For further reading you can go the original Docs

CodePudding user response：

You can use the onCancel={handleCancel} method and set the value isModalOpen = false to hide the modal.

example:

const handleCancel = () => { setIsModalOpen(false) }