Introdução
Modal é uma janela que abre sobre o conteúdo da página, seu intuito é indicar alguma informação ou aviso ao usuário.
Como um exemplo prático, é comum abrir uma caixa de confirmação quando um usuário vai excluir algum registro do sistema, é um aviso para garantir que o usuário tem certeza da ação que está fazendo.
Os frameworks modernos normalmente tem esse recurso já implementados, e fica mais fácil para utilizar.
Porém, acredito ser importante entender um pouco de como as coisas funcionam por baixo dos panos, isso pode ajudar a entender mais a fundo as funcionalidades que temos já prontas, como os elementos se comportam e como podemos adicionar novas funcionalidades.
Preview
Neste post vou mostrar como criar somente com HTML e CSS:
HTML
A parte de estrutura do documento vai ficar basicamente separada em duas partes.
Na primeira, será criado o botão que vai ter a ação de abrir o modal.
E na segunda, vai ter o modal em si que irá aparecer.
Basicamente o funcionamento é uma div que está ali no código, e está escondida para o usuário.
Assim que o botão de abrir é clicado, a lógica é fazer essa div que está escondida, aparecer por cima de todos os outros elementos.
O código HTML fica assim:
<link rel="stylesheet" href="style.css" />
<!-- botão para abrir -->
<div class="wrapper">
<a href="#demo-modal">Abrir modal</a>
</div>
<div id="demo-modal" class="modal">
<div class="modal__content">
<h1>Modal com HTML e CSS</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<div class="modal__footer">
<a href="#" class="modal__footer-btn-close"> Fechar </a>
</div>
<a href="#" class="modal__close">×</a>
</div>
</div>
CSS
Para a estilização do documento, também está dividido em duas partes.
Na primeira tem a estilização do documento, com as cores de fundo e centralização, e também a estilização do botão de abrir.
.wrapper {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: rgb(52, 52, 52);
background: linear-gradient(
90deg,
rgba(52, 52, 52, 1) 0%,
rgba(97, 119, 255, 1) 0%,
rgba(33, 57, 189, 1) 100%
);
}
.wrapper a {
display: inline-block;
text-decoration: none;
padding: 15px;
background-color: #fff;
border-radius: 3px;
text-transform: uppercase;
color: #585858;
font-family: "Roboto", sans-serif;
}
Logo em seguida nas estilizações, tem o estilo da div escondida em si, e também o pseudoelemento :target, que basicamente nesse caso faz aparecer o modal, trocando a sua visibilidade.
.modal {
visibility: hidden;
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(77, 77, 77, 0.7);
transition: all 0.4s;
}
.modal:target {
visibility: visible;
opacity: 1;
}
E por fim tem a estilização do conteúdo em si, o texto centralizado, o rodapé e o botão para fechar.
.content {
border-radius: 4px;
position: relative;
width: 500px;
max-width: 90%;
background: #fff;
padding: 1em 2em;
}
.footer {
text-align: right;
margin-top: 50px;
}
.close {
position: absolute;
top: 10px;
right: 10px;
color: #585858;
text-decoration: none;
}
.footer-btn-close {
width: 150px;
padding: 10px;
text-decoration: none;
background-color: #cfcca8;
color: #000000;
border-radius: 3px;
}
Somente com esse código já é possível ter um modal com HTML e CSS.
Esse código pode ser alterado para atender a sua necessidade.
O código em si não é muito difícil, são propriedades normalmente utilizadas no dia a dia.
O que mais difere é a lógica de fazer aparecer ao clicar no botão.
Código fonte
O código fonte desse conteúdo está no meu CodeSandbox, e você pode acessar neste link.
Para ver outros canais onde o posto conteúdo sobre HTML e CSS veja os Links do Programando Soluções.
Conclusão
É interessante aprender como algo que a gente usa na prática, funciona por baixo dos panos.
Acho muito importante isso, porque sabendo a base, é mais fácil para adaptar os elementos a mais casos.
Além disso é possível criar novas possibilidades, seja com um modal, ou com outros elementos, porque quanto mais você entende como os elementos funcionam, mais possibilidades de código tem de fazer.
Referências