Olá pessoal, tudo bem? Estou fazendo um modal para um site e gostaria de ajuda com um detalhe: Por enquanto eu apliquei "overflow-y" nele já que é um conteúdo extenso mesmo, então o background dele está fixo na tela e apenas o conteúdo rola para baixo, conforme vídeo: https://drive.google.com/file/d/1ySWSaSmJoncTMGqHs3MdGcuTncedplUQ/view?usp=sharing.
Mas na verdade eu gostaria que todo o modal rolasse assim como este exemplo: https://drive.google.com/file/d/160y189AeDnHwEwRUVLk9d0oEul7d0JyJ/view?usp=sharing
Já tentei aplicar o "overflow-y" no .modal-container, mas ele apesar de funcionar a rolagem, faz com somente uma parte do modal fique com o background e corta o topo do mesmo, como demonstrado a seguir: https://drive.google.com/file/d/1ebFShMyf2GtZMmy-kyoyizUONQUgMZJg/view?usp=sharing.
Segue abaixo o código html css do modal. O código em js adicionarei nas respostas pois não coube aqui. Agradeço desde já!
`.html
<p class="titulos-modal">Pequenas ideias solucionam grandes desafios.</p>
<p class="descricao-modal">Você sabia que +80% do potencial de melhoria de uma organização está dentro dela? Isso mesmo, nos colaboradores! Por isso temos um ambiente para coleta de ideias, insights e questionamentos em um espaço exclusivo para seu compartilhamento e execução. Tudo para que seu time seja ainda mais intraempreendedor!</p>
<p class="titulos-modal">Mais que compartilhar uma ideia, é acompanhar e plajenar junto.</p>
<p class="descricao-modal">Compartilhar uma ideia nunca foi tão fácil, visualizar e apoiar mais ainda! No mural, você pode acompanhar ideias internas junto de toda a comunicação.</p>
<img class="imagens-modal" src="modal-inovacao.png">
<p class="titulos-modal">Fale e interaja com todos</p>
<p class="descricao-modal">Utilizando o mural você facilita o diálogo com todos na sua empresa, garantindo o engajamento e eliminando gargalos de comunicação!</p>
<img class="imagens-modal" src="modal-inovacao-2.png">
<img class="imagens-modal" src="modal-inovacao-3.png">
<p class="subtitulo-modal" id="subtitulo-modal-inovacao">Fora isso, outros dados importantes são crescimento de +60% na “sensação de transparência interna” e +80% dos colaboradores acreditam estar mais próximos da lideraça.</p>
<input class="agendar-modal" type="submit" value="Agendar demonstração">
</div>
</div>`
.modal-container {
width: 100vw;
height: 100vh;
background:rgba(0, 0, 0, .5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(5px);
position: fixed;
top: 0px;
left: 0px;
z-index: 999;
display: none;
justify-content: center;
align-items: center;
}
.modal-container.mostrar {
display: flex;
}
@keyframes modal {
from {
opacity: 0;
transform: translate3d(0, -60px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.mostrar .modal {
animation: modal .3s;
}
.fechar {
display: flex;
position: absolute;
align-items: center;
justify-content: center;
top: 40px;
right: 50px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid #FFFFFF;
background: none;
cursor: pointer;
}
#fechar-modal {
max-width: 1rem;
}
.modal {
background: #1D1D1F;
width: 60%;
min-width: 300px;
height: 70%;
padding: 5rem 7rem 5rem 7rem;
border: none;
border-radius: 40px;
position: relative;
overflow-y: auto;
}
.titulos-modal{
font-size: 40px;
font-weight: 700;
color: #F0F0F2;
margin-top: 5rem;
}
.descricao-modal {
font-size: 30px;
font-weight: 600;
color: #A1A1A6;
margin-top: 0,9rem;
}
.subtitulo-modal {
font-size: 20px;
font-weight: 600;
margin-top: 2rem;
}
#subtitulo-modal-inovacao {
color: #FAE7B6;
}
.imagens-modal {
margin-top: 5.5rem;
max-width: 80%;
}
.agendar-modal {
border: solid 4px;
border-radius: 40px;
background: none;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 28px;
color: #FFFFFF;
cursor: pointer;
padding: 23px 215px;
margin-top: 80px;
}
.modal::-webkit-scrollbar {
width: 10px;
}
.modal::-webkit-scrollbar-track {
background: none;
border-radius: 20px;
}
.modal::-webkit-scrollbar-thumb {
background-color:none;
border-radius: 20px;
}