В общем, вроде бы в заголовке объяснил проблему. В интернете не нашёл ответа или я просто плохо гуглю :( Буду очень благодарен за ответы)
const modalBtnHire = document.querySelector('#modalBtnHire');
const modalContentHire = document.querySelector('#modalContentHire');
const modalCloseHire = document.querySelector('#modalCloseHire');
const openModalHire = document.querySelector('.modal-inner');
modalBtnHire.onclick = function () {
modalContentHire.classList.add('show');
setInterval(function () {
openModalHire.style.transform = 'scale(1)';
});
}
modalCloseHire.onclick = function () {
modalContentHire.classList.remove('show');
}
.btn-hire {
overflow: hidden;
margin-left: 50px;
display: block;
width: 220px;
height: 70px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
font-weight: 700;
color: white;
line-height: 70px;
background-color: #00897B;
position: relative;
transition: color .5s ease-out;
z-index: 1;
}
.btn-hire:before {
content: '';
width: 300px;
height: 170px;
border-radius: 50%;
background-color: #1ac0c5;
z-index: -1;
position: absolute;
top: 100%;
left: -19%;
transition: all .6s ease-in;
}
.btn-hire:hover:before {
top: -60px;
}
.modal {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .8);
/* opacity: 0; */
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200000;
}
.modal.show {
display: flex;
overflow: hidden;
}
.modal-inner {
width: 400px;
padding: 25px;
text-align: center;
background-color: #fff;
position: relative;
transform: scale(.5);
transition: transform .3s ease-out, opacity .3s ease-out;
}
.modal-close {
width: 30px;
height: 23px;
cursor: pointer;
position: absolute;
top: -37px;
right: -30px;
}
.modal-close span {
display: block;
width: 30px;
height: 2px;
margin: 5px 0;
background-color: #fff;
transform-origin: center;
}
.modal-close span:first-child,
.modal-close span:last-child {
position: absolute;
top: 50%;
left: 0;
}
.modal-close span:first-child {
transform: rotate(45deg);
}
.modal-close span:last-child {
transform: rotate(-45deg);
}
.modal.show {
display: flex;
overflow: hidden;
}
<div class="intro-btn-hire">
<a href="#" class="btn-hire" id="modalBtnHire">hire is now</a>
</div>
<div class="modal" id="modalContentHire">
<div class="modal-inner">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto eveniet quaerat quam nam corporis doloremque neque, nobis magni. Consectetur nulla officiis impedit corporis dolorum, sequi cupiditate vel minus modi explicabo?</p>
<div class="modal-close" id="modalCloseHire">
<span></span>
<span></span>
<!-- <img src="/Практика/CenterLogistic/img/modal-window/close.svg" alt=""> -->
</div>
</div>
</div>