How to make a call from a modal window to another modal window in Bootstrap3?

Question

JavaScript

For example, there is a "description" button

<a href="#description-training" data-toggle="modal">описание</a>

By clicking on this button, a bootstrap modal window pops up with a description. It also has another button, for example "request a call"

<a href="#modalOrderCall" data-toggle="modal" data-dismiss="modal" >Заказать звонок</a>

which, on click, should close this window and launch another one. To close the current one, I use the data-dismiss="modal" attribute.
And everything seems to be working, but, after opening the second window, the "modal-open" class is removed, which is hung on the body, adding the overflow:hidden style, and thereby preventing the site from scrolling.

In general, after opening the second window from the first one, it becomes possible to scroll the site, which is not cool. Are there ways to deal with this?

Answer 1

Try to open the second window not immediately, but by timeout. You can even use a zero timeout.

/* close modal */
setTimeout(function() {/* open modal */}, 0)

Answer 2

I had to click on this code

('#getModal').click(function(){
        $('#description-training').modal('hide');
        setTimeout(function() {$('#modalOrderCall').modal('show');}, 500)
        return false;
    })

that is, in fact, close one and then open the second.

Answer 3

But to be honest, I don't really like the twitch effect. Since when you open it, the screen is first cut off and a dimming background appears, then the screen falls back into place and the background disappears, and then it appears again, some kind of jerky effect.
And what should be used to accomplish such a task?
This is ideal, as I imagine it, so that the background does not disappear at the moment of changing windows, but simply the modal window disappears, for example, with a fade, and another one rises in its place.

Answer 4

Since the problem is that the "modal-open" class disappears from the body. You can attach a code to the "shown.bs.modal" event (fired after opening) of the 2nd modal window that will add the "modal-open" class to the body:

$('#modal2').on('shown.bs.modal', function (event) {
  $('body').addClass('modal-open');
})