CODEWITHSUNDEEP
reactjsantd
Adam
Adam

Reputation: 137

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

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?

enter image description here

Remove the below two buttons and keep the top X workable.

Upvotes: 0

Views: 1178

Answers (3)

Mehrnaz
Mehrnaz

Reputation: 1

you can set footer null like this

<Modal footer={null} onCancel={handleCancel}> </Modal>

and don't remove handleCancel function.

Upvotes: 0

Helphin
Helphin

Reputation: 183

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

example:

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

Upvotes: 0

Fried noodles
Fried noodles

Reputation: 125

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

Upvotes: 1

Related Questions