JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div class="main longcontent">
    <button class="open-modal">Open Modal</button>
    <br>
    <button class="open-modal">Open Modal</button>
    <br>
    <button class="open-modal">Open Modal</button>
</div>
<div class="modal">
    <div class="longcontent">
        <button class="close-modal">Close Modal</button>
        <br>
        <button class="close-modal">Close Modal</button>
        <br>
        <button class="close-modal">Close Modal</button>
    </div>
</div>

CSS

@keyframes show {
  0%   { top: -100%; }
  100% { top: 0; }
}

@keyframes hide {
  0%   { top: 0%; }
  100% { top: -100%; }
}

body
{
    margin: 0;
    padding: 0;
}

.longcontent {
    margin: 0 auto;
    line-height: 100px;
    text-align:center;
    background: green;
}
.modal {
    position: absolute;
    overflow: hidden;
    top: -100%;
    right; 0;
    left:0;
    bottom: 0;
    height: 100%;
    width: 100%;
}

.modal.visible
{
    animation: show 1s;
    top:0;
}

.modal.hide
{
    animation: hide 1s;
    top:-100%;
}

.modal .longcontent {
    background: yellow;
    margin: 0 auto;
}

JavaScript

var $body = window.document.body;
    var $modal = document.getElementsByClassName("modal")[0];
    var aOpenButtons = document.getElementsByClassName("open-modal");
    var aCloseButtons = document.getElementsByClassName("close-modal");
 

    function bodyFreezeScroll($obj) {
        $body.style.overflow = "hidden";
        $body.style.marginRight = getScrollBarWidth()+"px";
    }
    
    function bodyUnfreezeScroll() {
        $body.style.overflow = "auto";
        $body.style.marginRight = "auto";
    }
    
    
    function showModal(){
        $modal.classList.add("visible");
        $modal.classList.remove("hide");
    }
    
    function hideModal(){
        $modal.classList.add("hide");
        $modal.classList.remove("visible");
    }
    
   
    for(var i = 0, a=aOpenButtons.length; i<a; i++){
       aOpenButtons[i].addEventListener("click", function(){
        showModal();
        bodyFreezeScroll();
        }, false); 
    }
    
    for(var i = 0, a=aCloseButtons.length; i<a; i++){
       aCloseButtons[i].addEventListener("click", function(){
        hideModal();
        bodyUnfreezeScroll();
        }, false);
    }
    
    function getScrollBarWidth() {
      var inner = document.createElement('p');
      inner.style.width = "100%";
      inner.style.height = "200px";
    
      var outer = document.createElement('div');
      outer.style.position = "absolute";
      outer.style.top = "0px";
      outer.style.left = "0px";
      outer.style.visibility = "hidden";
      outer.style.width = "200px";
      outer.style.height = "150px";
      outer.style.overflow = "hidden";
      outer.appendChild (inner);
    
      document.body.appendChild (outer);
      var w1 = inner.offsetWidth;
      outer.style.overflow = 'scroll';
      var w2 = inner.offsetWidth;
      if (w1 == w2) w2 = outer.clientWidth;
    
      document.body.removeChild (outer);
    
      return (w1 - w2);
    };