I've got a serious issue with modal from Bootstrap.

When I open a modal box in my website, there's absolutly no problem (the modal-open class is correctly added on the body) the modal is correct, shade ok and content clear :

    buttonOpenMe

When I close it manualy, it's ok too :

  ×
  
CLOSE

In my first modal, I've got two others buttons to check my previous & next projects (my website is a one-page).
And this is what i want to do :

1. open modal#1
2. scroll & click on next project
3. close modal#1
4. open modal#2, etc...

  CloseThis

My body had an added class called "modal-open" when a modal box is opened. But when I'm already in the first modal & I want to go into the second project (modal#2), he appears but my scroll is locked and my body lost his modal-open class.

I think data-dismiss="modal" clear everything. But when I add manually (with inspector) the class "modal-open" on my body when the second modal is opened, everything works.

So I tried to fix this with a lot a solution from forum post & nothing really works.

I think I had to look for this type of snippets for adding the class on the body automatically,
something like that :

$(document)
  .on('show.bs.modal', '.modal', function () {
    $(document.body).addClass('modal-open');
  })
  .on('hidden.bs.modal', '.modal', function () {
    $(document.body).removeClass('modal-open');
  });

But actually, everything failed, obviously!

How can I fix this?

If you want to take a look to my online test version: http://bg-portfolio.com/bg_test/index.php , scroll and click on the first project "Gamers Assembly 2017", then scroll and click on "Projet suivant" (next project). The bug will appear!

PS: I'm working with Bootstrap v3.3.7 (and when I paste news files, everything is broken, so for this website, I just want to stay under this version for now)