Page 1 of 1

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

Posted: Tue Sep 30, 2025 4:45 pm
by 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

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

Posted: Tue Sep 30, 2025 5:17 pm
by 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

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

Posted: Tue Sep 30, 2025 5:23 pm
by 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.