'Close' and 'Save' button in the modal stop working when another modal is added

Hi All,
I have an AG-grid from where I am trying to open two modals. The modals are opening , but when I try to add another modal, the ‘Close’ and ‘Save’ button in my first modal stop working. When I remove the second modal, the buttons again start working. Please help.

(Modal 1)

  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="0">Modify Job Details for:</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body row">
        <div class="ui vertical steps col-sm-6">
                  
        </div>
        
      </div>
      <p id="signatureWarning" class="alert alert-danger" role="alert"></p>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button id='modify-complete' type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

(Modal 2)





Cannot invoice the customer


×

      <div class="containerInvoice">
        <div class="modal-body row"> 
          <p>You cannot invoice the customer.</p>            
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>     
  </div>
</div>

Could you send a link to the codepen?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.