How to open a new Modal, AND close the existing Modal

[ArtcoInc]

(Bootstrap 4, PHP 7)

In my store, I have a modal. Within that modal, I have a button that opens a 2nd Modal:

Code: Select all

                <div data-toggle="modal" data-target="#ModalLogin">
                  <?php echo tep_draw_button(IMAGE_BUTTON_CHECKOUT, 'fas fa-angle-right', NULL , 'primary', NULL, 'btn-success'); ?>
                </div>

This works, but the first Modal is still open. How can I open the 2nd Modal AND close the 1st?

TIA

Malcolm

[ArtcoInc]

This works:

Code: Select all

                <div class="close" data-dismiss="modal" data-toggle="modal" data-target="#ModalLogin">

BUT, the resulting button is a faded green, not the dark green as normal.

Malcolm

[burt]

I think you would need to do some jQuery (as you are on BS4).

In simple terms, when the second one fires, hide the first.

Code: Select all

$(document).ready(function() {
  $('#secondModal').on('show.bs.modal', function () {
    $('#firstModal').modal('hide');
  });
});

Change #secondModal and #firstModal to whatever their ID's are.
In your case, one of them would need to be #ModalLogin.

Note that modals on modals gets messy when it comes to accessibility.