title: How to make the modal scrollbar replacing the body scrollbar temporary without moving its contents to the right?
body: <p>I created a Modal. Everything went well. When there are lot of contents, a vertical scrollbar will show up.</p>
  
  <p>The problem is if the body page and the modal have both a lot of contents there will be two vertical scrollbars.</p>
  
  <p>Here an example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function showModal() {
    // Hide Body Scrollbar
    // document.body.style.overflow = "hidden";
    
    document.getElementById("myModal").style.display="block";
    // When the user clicks anywhere outside of the modal, close it
    var modal = document.getElementById("myModal");
    window.onclick = function(event) {
     if (event.target == modal) {
      //modal.style.display = "none";
      closeModal();
     }
    }
    
   }
   function closeModal() {
    // Show Body Scrollbar
    // document.body.style.overflow = "visible";
    document.getElementById("myModal").style.display="none";
   }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.modal {
    display: none;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
   }
   .modalContent {
    border-radius: 10px;
    background-color: #fefefe;
    margin: 10% auto; /* 15% from the top and centered */
    padding: 0;
    border: 1px solid #888;
    width: 50%; /* Could be more or less, depending on screen size */
    overflow: hidden;
   }
   .modal .modalHeader {
    font-family: 'Ubuntu', Arial;
    font-weight: bold;
    padding: 10px;
    margin: 0;
   }
   .modal .modalHeader span {
    color: #7788C9;
    letter-spacing: 4px;
   }
   .modal .modalHeader .close {
    color: #000;
    float: right;
    padding: 0 10px;
   }
   .clear-close{clear:right;display: block;}
  
   .modal .modalBody {
    background-color: #FFF;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: #000;
    position: static;
    padding: 10px;
    margin: 0;
   }
   .modal .modalFooter {
    padding: 10px;
    margin: 0;
    text-align: right;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;center&gt;
    &lt;h1&gt;Modal&lt;/h1&gt;
    
    &lt;button onClick="showModal()"&gt;
     Show Modal
    &lt;/button&gt;
    
    
    &lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.
    &lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.
    &lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.
    &lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.
   &lt;/center&gt;
  
   &lt;div id="myModal" class="modal"&gt;
    &lt;div id="abc" class="modalContent"&gt;
     &lt;div class="modalHeader"&gt;
      &lt;span&gt;Modal&lt;/span&gt;
      &lt;a href="javascript:void(0)" class="close" onclick="closeModal()"&gt;X&lt;/a&gt;
     &lt;/div&gt;
  
     &lt;div class="modalBody clear-close"&gt;
      This is the modal content. 
      &lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.
      &lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.
      &lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.
     &lt;/div&gt;
     
     &lt;div class="modalFooter"&gt;
      &lt;a href="javascript:void(0)" onclick="closeModal()"&gt;Close&lt;/a&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've my solutions, but they have up and down:</p>
  
  <p>1) Trying to keep the modal as short as possible. Problem is not everyone has the same screen size. So some people might see 2 scrollbars.</p>
  
  <p>2) In my Javascript code, <code>document.body.style.overflow</code> are currently set as a commentary. I uncomment them. When I click Show Modal, it shows 1 scrollbar like I want. But the down is when I click on it, the content behind the modal moves slightly to the right. (When websites is centered)</p>
  
  <p>So, is there a way to show the modal scrollbar only without the body scrollbar and without making the content behind moving slightly to the right and to the left?</p>
  
  <ul>
  <li>We should see 1 scrollbar only when the modal show up. </li>
  <li>We should not see the content behind the modal moving slightly to the
  right and left when opening and closing.</li>
  </ul>
  
  <p>Note: I'm not allowed to use jQuery</p>