title: Modal Bootstrap / Multiple modal on one-page / modal-open Class
body: <p>I've got a serious issue with modal from Bootstrap.</p>
  
  <p>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 :</p>
  
  <p><code>&lt;button type="button" data-toggle="modal" data-target="#Modal_GA"&gt;buttonOpenMe&lt;/button&gt;</code></p>
  
  <p>When I close it manualy, it's ok too :</p>
  
  <p><code>&lt;button type="button" class="close2" data-dismiss="modal" aria-label="Close"&gt;
   &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;p class="TxtClose"&gt;CLOSE&lt;/p&gt;</code></p>
  
  <p>In my first modal, I've got two others buttons to check my previous &amp; next projects (my website is a one-page). 
  <br>And this is what i want to do :<br>
  action 1) open modal#1<br>
  action 2) scroll &amp; click on next project<br>
  action 3) close modal#1<br>
  action 4) open modal#2, etc...<br></p>
  
  <p><code>&lt;button type="button" data-dismiss="modal" data-toggle="modal" data-target="#Modal_Animations"&gt;
  CloseThis
  &lt;/button&gt;</code></p>
  
  <p>My body had an added class called "modal-open" when a modal box is opened. But when I'm already in the first modal &amp; 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.</p>
  
  <p>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.</p>
  
  <p>So I tried to fix this with a lot a solution from forum post &amp; nothing really works.</p>
  
  <p>I think I had to look for this type of snippets for adding the class on the body automatically, something like that :</p>
  
  <pre><code>    $(document)
  .on('show.bs.modal', '.modal', function () { 
      $(document.body).addClass('modal-open') 
  })
  .on('hidden.bs.modal', '.modal', function () { 
      $(document.body).removeClass('modal-open') 
  })
  </code></pre>
  
  <p>But actually, everything failed, obviously! </p>
  
  <p>How can I fix this?</p>
  
  <p>If you want to take a look to my online test version: <a href="http://bg-portfolio.com/bg_test/index.php" rel="nofollow noreferrer">http://bg-portfolio.com/bg_test/index.php</a> , scroll and click on the first project "Gamers Assembly 2017", then scroll and click on "Projet suivant" (next project). The bug will appear!</p>
  
  <p>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)</p>