Modal toggled in other modal - can't scroll modal

Question

I created a modal and inside the modal I created a button to open the second modal and close the first but the problem is that the scrollbar doesn't work for the second modal but works for page.

How could I fix this?

code in fiddle:

link to fiddle

Answer 1

In this case, you shouldn't use data-toggle="modal" or data-dismiss="modal" (as there's no guarantee that the hiding and the showing will happen in the right order) and instead do the showing and hiding yourself. Example:

---

<button type="button" id="modal-2-btn">open modal 2 »</button>

---

$('#modal-2-btn').on('click', function () {
  $('#modal-trainertype').one('hidden.bs.modal', function () {
    $('#modal-food').modal('show');
  }).modal('hide');
});

Answer 2

See this Fiddle

Add CSS:

#modal-food{
    overflow:auto
}