title: How to pop up a confirmation modal from Ant Design in a reactstrap form on edit button click
body: <p>I have an issue with a confirmation popup being triggered from an edit modal built with reactstrap. Currently, when I click the edit button and fill in the edit form, I click submit, and expect to see the confirmation modal. However, the confirmation modal is rendering behind the edit form. How do I resolve this so that the confirmation modal is not rendered behind the form?</p>
  
  <p>I would like to render the confirmation modal in front of the edit form modal, like a double nested modal.</p>
  
  <p><a href="https://i.stack.imgur.com/VUEKm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VUEKm.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/JOUCU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JOUCU.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;Media className="align-items-center"&gt;
                        &lt;Media&gt;
                          &lt;button  className="btn btn-primary" onClick= {() =&gt; this.editClient(post , post.clientId)}&gt;&lt;i class="fa fa-edit"&gt;&lt;/i&gt;&lt;/button&gt;
                          &lt;Button className="btn btn-danger" onClick= {(event) =&gt; this.handleDelete(event, post.clientId)} &gt;&lt;i class="fa fa-trash"&gt;&lt;/i&gt;&lt;/Button&gt;                 
                          &lt;Modal isOpen={this.state.modal} toggle={this.handleEdit} className={this.props.className}&gt;
                          &lt;ModalHeader&gt;Edit Client&lt;/ModalHeader&gt;
                          &lt;ModalBody&gt;
                          &lt;Form &gt;
                          &lt;FormGroup&gt;              
                              &lt;Label htmlFor="clientId"&gt;ID Client&lt;/Label&gt;
                              &lt;Input type="text" value={clientId} name="clientId" className="form-control" placeholder="ID Client" onChange={this.handleForm}  disabled /&gt;
                           &lt;/FormGroup&gt;
                           &lt;FormGroup&gt;
                            &lt;label htmlFor="durasi"&gt;Tipe Client&lt;/label&gt;
                              &lt;select onChange={this.handleForm} value={clientType} className="form-control"  name = "clientType" required="" &gt;
                                  &lt;option value=""&gt;Pilihan&lt;/option&gt;
                                  &lt;option value="BACKEND"&gt;BACKEND&lt;/option&gt;
                                  &lt;option value="CHANNEL"&gt;CHANNEL&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/FormGroup&gt;
                           &lt;FormGroup&gt;
                              &lt;Label htmlFor="name"&gt;Nama&lt;/Label&gt;
                              &lt;Input onChange={this.handleForm} value={name} type="text"  name = "name" className="form-control" placeholder="Name" required="" /&gt;
                           &lt;/FormGroup&gt;
                           &lt;FormGroup&gt;
                              &lt;Label htmlFor="url"&gt;Url&lt;/Label&gt;
                              &lt;Input onChange={this.handleForm} value={url} type="text"  name = "url" className="form-control" placeholder="Url" required="" /&gt;
                           &lt;/FormGroup&gt;
                           &lt;FormGroup&gt;
                              &lt;Label htmlFor="urlBlacklist"&gt;Url Blacklist&lt;/Label&gt;
  
                              {(this.state.post3.map(h =&gt; {
  
                                if ( `${h.clientId}` === `${this.state.formData.clientId}`) {
                                  return &lt;Input onChange={this.handleForm} value= {urlBlacklist}  type="text"  name = "urlBlacklist" className="form-control" placeholder="URL Black List" required="" /&gt;
                                 }} ))}                
                           &lt;/FormGroup&gt;
  
                           &lt;FormGroup&gt;
                            &lt;label&gt;
                              &lt;input type="checkbox" checked= {isChecked} onChange= {this.toggleChange} value="remember-me" /&gt; Anda yakin, Data anda sudah benar ?
                            &lt;/label&gt;
                          &lt;/FormGroup&gt;
  
                           &lt;FormGroup&gt;
  
                           &lt;ButtonAntd type="primary" htmlType="submit" onClick={(event) =&gt; this.handleSubmit(event)}&gt;Submit&lt;/ButtonAntd&gt;{' '}
                           &lt;ButtonAntd type="danger" htmlType="submit" onClick={this.handleBatal}&gt;Cancel&lt;/ButtonAntd&gt;
                           &lt;/FormGroup&gt;
  
  
                          &lt;/Form&gt;
                          &lt;/ModalBody&gt;
                          &lt;/Modal&gt;
  </code></pre>