Solucionado
Olá. Fiquei com uma grande dor de cabeça com a pergunta 9 da aula 5 do HTML5 CSS3 II: turbinando as suas páginas. Acredito que a resposta não seja complexa nem nada do tipo, mas preciso de uma explicação mais consistente, com os passos para entender melhor. Alguém poderia me dar esse apoio?
hoje, com a Alura e o Google Gemini
Oi Genesis, tudo bem? Expôe sua dúvida aqui pra gente trabalhar em cima do que exatamente você não entendeu. Pode ser?
Minha dúvida seria como começar ela, como adicionar o elemento na página e etc. A resposta da pergunta da uma parte da resolução mas não ela toda.
Genesis, na própria pergunta diz que o elemento deve ser colocado dentro do body, que pode ser o primeiro elemento. Depois disso você só precisa adicionar os estilos. Então basicamente, dentro do body você teria:
<div class="box">
Messagem para o box
</div>e nos estilos teríamos:
.box{
width: 40%;
background-color: #FFF;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.75);
padding: 10% 3%;
text-align: center;
font-size: 2em;
}lembrando que as classes foram capricho meu.
Boa noite Genesis. Acredito que você deva ter ficado com alguma dúvida em relação a criação do "modal", certo? Bom, para criar um modal você deve, primeiro, adicionar um elemento ao "body". Por exemplo:
<body>
<div class="minha-modal">
<div class="minha-modal-body">
Conteúdo da modal
</div>
</div>
</body>P.S.: Pode ser no começo do body ou no final do body.
Depois de criar um html parecido com isso você deve criar o estilo da sua modal. A modal deve ter um fundo que ocupe a tela toda e tenha um opacidade. Coloquemos um numero bem alto no shadow para que ele se espalhe por toda a tela (9999px).
.minha-modal {
z-index: 9999;
box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.75);
}Mesmo exemplo do exercicio.
Agora, estilize o conteúdo da sua modal. Ela será um quadrado branco, fixado no meio da página acima de todos os outros objetos. Para dar um toque especial no visual o instrutor sugeriu algumas mudança também (estará depois do elemento "left")
.minha-modal-body {
background-color: #FFFFFF;
z-index: 99999999;
position: fixed;
top: 50%;
left: 50%;
padding: 10% 3%;
text-align: center;
font-size: 2em;
}Caso haja mais dúvidas pode chamar de novo!!
Muito obrigado aos dois, apesar de achar que estava começando errado, na verdade eu estava correto! kkk Me perdi no meio da questão e achei era o o começo que estava errado.Obs: Os dois que me responderam essa questão, coloquei o moderador como solução, mas os dois me ajudaram a entender o meu erro.