How make a modal transition?

Question

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.

I found this code from google : https://codepen.io/designcouch/pen/obvKxm

But it's really too complicated for me. I can't understand how adapt it with my 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 <span> 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 <span> (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 <span> 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 <span> (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";
    }
}

@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;
}

		<div id="content">


		  <h3>Electrophotonique Ingénierie : Nouvelle approche de l'imagerie macroscopique par effet de couronne dans le domaine de la santé et des biotechnologies.</h3>

		  <div id="file" action="" class = "container"> 
		  	<input id = "stress" type="image" src="IMAGES/PNG/hydricstress.png" />
		  	<div class = "text">
		  		 Stress hydrique
		  	</div>  
		  </div> 

		  <!-- The hydric stress Modal -->
		<div id="hydricstressmodal" class="hydricstressmodal">
		  	<div class="stress-content">
		   		<span class="stressclose">&times;</span>
		    	<div class ="popstress" ><img src="images/png/hydricstress.png"></div>
		    	<p>Some text in the Modal..</p>
		 	</div>
		</div>


		  <div id="file" action="" class = "container"> 
		  	<input id = "vegetal" type="image" src="IMAGES/PNG/vegetal.png" />
			  	<div class = "text">
			  		 Biophotonique appliquée aux végétaux
			  	</div>  
			</div>
		  </div>

		  <!-- The vegetal Modal -->
		<div id="vegetalmodal" class="vegetalmodal">
		  	<div class="vegetal-content">
		   		<span class="vegetalclose">&times;</span>
		    	<div class ="popvegetal" ><img src="images/png/vegetal.png" ></div>
		    	<p>Some text in the Modal..</p>
		 	</div>
		</div>		  


		  <div id="file" action="" class = "container"> 
		  	<a href="#bridge"><img src="IMAGES/PNG/pont.png" width="100%" /></a>
		  	<div class = "text">
		  		 Etudes des ponts photoniques
		  	</div>  
		  </div>


		
		  
<script type="text/javascript" src="JS/sticky_navbar.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script  src="js/index.js"></script>
<script  src="js/button.js"></script>

Answer 1

A simple solution with css animations:

$('#open').click(function() {
  $('#modalOverlay').show().addClass('modal-open');
});

$('#close').click(function() {
  var elem = $('#modalOverlay');
  elem.removeClass('modal-open');
  setTimeout(function() {
    elem.hide();
  },200);
});

#modalOverlay {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: rgba(0,0,0,0.8);
  z-index:9999;
}

#modal {
  position:fixed;
  width:60%;
  top:55%;
  left:50%;
  padding:15px;
  text-align:center;
  background-color:#fafafa;
  box-sizing:border-box;
  opacity:0;
  transform: translate(-50%,-50%);  
  transition:all 150ms ease-in-out;
}

#modalOverlay.modal-open #modal {
  opacity:1;
  top:50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="open" type="button">View modal</button>
<div id="modalOverlay" style="display:none;">
  <div id="modal">
    <h1>My modal</h1>
    <p>This is a simple modal</p>
    <button id="close" type="button">Close</button>
  </div>
</div>

Answer 2

You can also use library like bootstrap. For bootstrap modal you can refer below link. https://getbootstrap.com/docs/4.0/components/modal/

Answer 3

If you don't want to spend too much time on this kind of feature you could use a library like https://sweetalert2.github.io/ which is very easy to use and do the job.