title: How make a modal transition?
body: <p>I'm trying to animate a modal with a transition. I'm just looking for open it slowly but i don't understand how it works... 
  The modal have to be open from the center of the screen or from the screen down side.</p>
  
  <p>I found this code from google : 
      <code>https://codepen.io/designcouch/pen/obvKxm</code></p>
  
  <p>But it's really too complicated for me. I can't understand how adapt it with my code...</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>/*Ouvrir le popup stress */
  // Get the  modal
  var hydricstressmodal = document.getElementById('hydricstressmodal');
  
  // Get the button that opens the modal
  var stress = document.getElementById("stress");
  
  // Get the &lt;span&gt; element that closes the modal
  var hydricstressspan = document.getElementsByClassName("stressclose")[0];
  
  // When the user clicks the button, open the modal 
  stress.onclick = function() {
      hydricstressmodal.style.display = "block";
  }
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  hydricstressspan.onclick = function() {
      hydricstressmodal.style.display = "none";
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
      if (event.target == hydricstressmodal) {
          hydricstressmodal.style.display = "none";
      }
  }
  
  /*Ouvrir le popup vegetal */
  // Get the  modal
  var vegetalmodal = document.getElementById('vegetalmodal');
  
  // Get the button that opens the modal
  var vegetal = document.getElementById("vegetal");
  
  // Get the &lt;span&gt; element that closes the modal
  var vegetalspan = document.getElementsByClassName("vegetalclose")[0];
  
  // When the user clicks the button, open the modal 
  vegetal.onclick = function() {
      vegetalmodal.style.display = "block";
  }
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  vegetalspan.onclick = function() {
      vegetalmodal.style.display = "none";
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
      if (event.target == vegetalmodal) {
          vegetalmodal.style.display = "none";
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "UTF-8";
  /* CSS Document */
  body {
    margin: 0;
    font-size: 28px;
    background-color: #00011f;
    display: flex;
    flex-direction: column;
    margin : auto;
  }
  
  
  /*popup hydric stress*/
  .hydricstressmodal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
  }
  
  /* stress Modal Content */
  .stress-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      height: 70%;
      border-radius: 30px;
      overflow: scroll;
  
  }
  .popstress img{
    width: 20%;
  }
  
  /* The Close Button */
  .stressclose {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
  }
  
  .stressclose:hover,
  .stressclose:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
  }
  
  /*popup Vegetal*/
  .vegetalmodal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
      scale
  }
  
  /* stress Modal Content */
  .vegetal-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      height: 70%;
      border-radius: 30px;
      overflow: scroll;
  
  }
  
  .popvegetal img{
    width: 40%;
  }
  /* The Close Button */
  .vegetalclose {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
  }
  
  .vegetalclose:hover,
  .vegetalclose:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div id="content"&gt;
  
  
      &lt;h3&gt;Electrophotonique Ingénierie : Nouvelle approche de l'imagerie macroscopique par effet de couronne dans le domaine de la santé et des biotechnologies.&lt;/h3&gt;
  
      &lt;div id="file" action="" class = "container"&gt; 
       &lt;input id = "stress" type="image" src="IMAGES/PNG/hydricstress.png" /&gt;
       &lt;div class = "text"&gt;
         Stress hydrique
       &lt;/div&gt;  
      &lt;/div&gt; 
  
      &lt;!-- The hydric stress Modal --&gt;
    &lt;div id="hydricstressmodal" class="hydricstressmodal"&gt;
       &lt;div class="stress-content"&gt;
         &lt;span class="stressclose"&gt;&amp;times;&lt;/span&gt;
         &lt;div class ="popstress" &gt;&lt;img src="images/png/hydricstress.png"&gt;&lt;/div&gt;
         &lt;p&gt;Some text in the Modal..&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
      &lt;div id="file" action="" class = "container"&gt; 
       &lt;input id = "vegetal" type="image" src="IMAGES/PNG/vegetal.png" /&gt;
        &lt;div class = "text"&gt;
          Biophotonique appliquée aux végétaux
        &lt;/div&gt;  
     &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- The vegetal Modal --&gt;
    &lt;div id="vegetalmodal" class="vegetalmodal"&gt;
       &lt;div class="vegetal-content"&gt;
         &lt;span class="vegetalclose"&gt;&amp;times;&lt;/span&gt;
         &lt;div class ="popvegetal" &gt;&lt;img src="images/png/vegetal.png" &gt;&lt;/div&gt;
         &lt;p&gt;Some text in the Modal..&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;    
  
  
      &lt;div id="file" action="" class = "container"&gt; 
       &lt;a href="#bridge"&gt;&lt;img src="IMAGES/PNG/pont.png" width="100%" /&gt;&lt;/a&gt;
       &lt;div class = "text"&gt;
         Etudes des ponts photoniques
       &lt;/div&gt;  
      &lt;/div&gt;
  
  
    
      
  &lt;script type="text/javascript" src="JS/sticky_navbar.js"&gt;&lt;/script&gt;
  &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'&gt;&lt;/script&gt;
  &lt;script  src="js/index.js"&gt;&lt;/script&gt;
  &lt;script  src="js/button.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>