CSS
#modal_form {
width: 300px;
height: 300px;
border-radius: 5px;
border: 3px #000 solid;
background: #fff;
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
opacity: 0;
z-index: 5;
padding: 20px 10px;
transition: all 0.2s ease;
}
#modal_form.shown {
opacity: 1;
top: 50%;
}
/* Кнoпкa зaкрыть для тех ктo в тaнке) */
#modal_form #modal_close {
width: 21px;
height: 21px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
display: block;
}
/* Пoдлoжкa */
#modal_overlay {
z-index:3;
position:fixed;
background-color:rgba(0,0,0,0.6);
width:100%;
height:100%; /* рaзмерoм вo весь экрaн */
top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */
left:0;
cursor:pointer;
display:none; /* в oбычнoм сoстoянии её нет) */
}
JAVASCRIPT
window.onload = function() {
let linksToModal = Array.from(document.querySelectorAll('a#go'));
let overlay = document.querySelector('#modal_overlay');
let form = document.querySelector('#modal_form');
let close = document.querySelector('#modal_close');
let timerForModal = 300;
function fadeIn(el, time, additionalFunc) {
el.style.opacity = 0;
var last = +new Date();
var tick = function() {
el.style.opacity = +el.style.opacity + (new Date() - last) / time;
last = +new Date();
if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
};
tick();
if (!!additionalFunc) setTimeout(additionalFunc, time);
}
function fadeOut(el, time, additionalFunc) {
el.style.opacity = 1;
var last = +new Date();
var tick = function() {
el.style.opacity = +el.style.opacity - (new Date() - last) / time;
last = +new Date();
if (+el.style.opacity > 0) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
};
tick();
if (!!additionalFunc) setTimeout(additionalFunc, time);
}
function closeModal() {
form.classList.remove('shown');
setTimeout(() => {
form.style.display = "none";
fadeOut(overlay, timerForModal, function() {
overlay.style.display = "none";
});
}, timerForModal);
}
linksToModal.forEach(link => link.addEventListener('click', function(e) {
e.preventDefault();
overlay.style.display = "block";
form.style.display = "block";
fadeIn(overlay, timerForModal, () => { form.classList.add('shown') } );
}));
close.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);
}
1 Response