Function to close two modals angular2+

0
votes

I have a side modal that opens up a confirm modal with two options: yes and no.

When the user clicks "yes" button, I want both modals to close, but at the moment, I can only close one at a time, starting with the modal that is closest to the front.

I do not have focus problems, and I know you cannot do data-dismiss twice in a line, so any ideas? I am thinking I need a typescript function that takes in two Ids?

I am using angular2+ and bootstrap, would like to avoid using Jquery, and have a typescript solution or some sort of modal.bs.hide?

To open the modals, I am doing 

<td> <button data-toggle="modal" data-target="#myModal2" id="actionButton"><i 
id="arrowColor" class="fa fa-arrow-circle-o-right"></i>

from the first modal, nd then 

<button data-toggle="modal" data-target="#approveModal" type="button" 
id="footerButton" class="btn btn-default"><i id="footerButtonColor" class="fa 
fa-check-circle-o"></i>Approve</button>

to open the second modal. Doing the modal-dismiss closes the second modal, but not the first one

2
angularbootstrap-modal
please provide more information: are you using jQuery or a third party library like ng-bootstrap ? - Guerric P
Sorry! I am using bootstrap, I would like no JQUery since this is angular2+ - J Hogan
it's still not clear, you are opening modals already. What did you use to achieve it ? - Guerric P
To open the modals, I am doing <td> <button data-toggle="modal" data-target="#myModal2" id="actionButton"><i id="arrowColor" class="fa fa-arrow-circle-o-right"></i> from the first modal, and then <button data-toggle="modal" data-target="#approveModal" type="button" id="footerButton" class="btn btn-default"><i id="footerButtonColor" class="fa fa-check-circle-o"></i>Approve</button> to open the second modal. Doing the modal-dismiss closes the second modal, but not the first one :) @YoukouleleY - J Hogan

2 Answers

0
votes

You can close the modal by doing something like this:

in component.ts

declare var $: any;

$('#Idofthemodal').modal('hide');

Not sure if this is compatible solution but this is just a work around

0
votes

No TS needed. Solved with this inside second modal popup: 

 <button data-toggle="modal" data-target="#myModal2" data-dismiss="modal" type="button" id="footerButton" class="btn btn-default"><i id="footerButtonColor" class="fa fa-check-circle-o"></i>Yes, Approve Request</button>