CODEWITHSUNDEEP
javascriptreactjsantd
Kuku
Kuku

Reputation: 514

prevent ant design modal outside clicking closing modal

we are using react and ant design as the frontend tech. One thing I noticed in the ant design modal. When we put onCancel attr in the modal like the code below. This will allow us can close the modal by clicking the 'X' in the right corner but it will also allow closing modal by clicking anywhere outside the model. Is there a way to prevent this outside click action while keeping the 'X' action ? Thanks in advance

            <Modal
            visible={visible}
            title="My modal"
            onOk={handleOk}
            onCancel={closeMyModal}
            className='myModal'
        >

Upvotes: 5

Views: 10861

Answers (3)

greeneley
greeneley

Reputation: 117

According to Antd's documentation, you have two solutions:

  1. If you use the <Modal> in your component, you'd to set maskClosable={false}. This prevents you from viewing the modal when you press outside the modal area.

  2. You can check Modal.confirm() as follows: https://ant.design/components/modal/#components-modal-demo-confirm

Upvotes: 1

noctrlz
noctrlz

Reputation: 386

add

maskClosable = {false}

to prevent closing the modal dialog when the mask (area outside the modal) is clicked

<Modal
  visible={visible}
  title="My modal"
  onOk={handleOk}
  onCancel={closeMyModal}
  className='myModal'
  maskClosable={false}
  >

Upvotes: 26

cuongdevjs
cuongdevjs

Reputation: 731

You need to set property maskClosable by false to prevent it

Upvotes: 2

Related Questions