Bootstrap 3, how to fix parent page when modal window is tricky called?

Question

JavaScript

When a modal window is opened, a class is added to the body .modal-open { overflow: hidden; }and the site page is fixed.

In my case, the second modal window is called directly from the open modal window (the first one is closed at the same time so that they do not overlap each other).
So, with such a call to the second window, modal-open for some reason is not added to the body and, accordingly, the parent page scrolls.
Nothing terrible, but annoying.

How to fix this moment?

I'm trying to force it like this:

$('#Modal2').on('show.bs.modal', function (e) {
    $('body').addClass('modal-open');
  })

Works in FF, but not in chrome and safari.
I try like this:

$('#Modal2').on('show.bs.modal', function (e) {
   $('body').css('overflow','hidden');
  })

In this case, everything works everywhere, but when the window is closed, the page is not "unfixed", scrolling does not work.
You can also add to the closure:

$('#Modal2').on('show.bs.modal', function (e) {
   $('body').css('overflow','hidden');
  });
$('#Modal2').on('hidden.bs.modal', function (e) {
   $('body').css('overflow','auto');
  })

Everything seems to be ok, but there is another problem. If later, after such a closure, any modal window is called again, then the page is no longer fixed (until the browser is refreshed, of course).

Where is the error or what needs to be added? I don't understand at all.

Answer 1

hang a handler on all id, you only have a second window like. it is also recommended to clear the cache

$('#Modal2, #Modal1').on('show.bs.modal', function (e) {
     $('body').css('overflow','hidden');
    });
$('#Modal2, #Modal1').on('hidden.bs.modal', function (e) {
     $('body').css('overflow','auto');
     $(this).removeData('bs.modal');
    })