Dynamic back button to navigate back to modal you came from

Question

This is on Bootstrap 4.
I am building a website and they are 17 different modals but specific words in each modal are linked to a different modal so if you want to read more about them, you can. The problem is if you want to go back to the previous modal you would have to close 2nd modal and go back and open the original one.

example:
Modal 1 links to modal 3, 5, 8, and 9.
Modal 11 links to modal 4, 5, 8, and 2.

Is there a way to create a dynamic back button in javascript that would allow the user to go back to the previous modal that they came from?

PS I don't know which part of the code to include since they are so many modals and this is plain bootstrap 4.

But this is how the words are linked to different modals

<a data-dismiss="modal" data-toggle="modal" href="#back-and-leg-pain">lower back and leg pain</a>

PPS I can try to not dismiss the previous modal but I'm afraid of it resulting in massive clutter for the user.

Answer 1

Your goal sounds like exactly what a stack is designed for, which we can implement using a simple array of numbers stored in a global variable. The current variable helps us keep track of where we currently are without it getting in the way of navigating back.

var modal_stack = [];
var current;

function go_modal(destination){
 $('.modal').modal('hide');
 modal_stack.push(current);
 current = destination;
 $('#modal-'+destination).modal('show');
}
function back_modal(){
 $('.modal').modal('hide');
 $('#modal-'+modal_stack.pop()).modal('show');
}