tenho um código em html que quando clico no botão ele abre uma modal, e dentro da modal tenho outro botão para fechar, e eu gostaria de colocar uma animação na hora de abrir e na hora de fechar, por exemplo ela ir desvanecendo ou coisa do tipo....
javascript
function openModal(){
var i = document.getElementById('i').value;
if (i == '0') {
document.getElementById('i').value = '1';
document.getElementById('modal').style = 'display: flex;';
}else{
document.getElementById('i').value = '0';
document.getElementById('modal').style = 'display: none;';
}
}
CSS
*{margin: 0;}
.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
text-shadow: 6px 3px 9px #000000;
-webkit-box-shadow: 0px 1px 3px #000000;
-moz-box-shadow: 0px 1px 3px #000000;
box-shadow: 0px 1px 3px #000000;
font-family: Arial;
color: #ffffff;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decorationecoration: none;
}
.modal{
width: 100vw;
height: 100vh;
background: #00000078;
display: none;
flex-direction: row;
justify-content: center;
align-items: center;
position: fixed;
}
.window{
width: 900px;
height: 500px;
background: #fff;
border-radius: 5px;
}
.close_btn{
width: 25px;
height: 25px;
background-image: url(image/close.png);
background-size: 24px;
float: right;
}
.close_btn:hover{
background-image: url(image/close_hover.png);
}
.bar{
background-color: black;
height: 25px;
border-radius: 5px 5px 0px 0px;
}
HTML
<div class="modal" id="modal">
<div class="window" id="window">
<div class="bar" id="bar">
<div class="close_btn" id="close_btn" onclick="openModal()"></div>
</div>
<input type="hidden" name="i" id="i" value="0">
</div>
</div>
<input type="button" href="#" class="btn" onclick="openModal()" id="bnt" value="Upload...">