Como fazer modal com HTML e CSS

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">&times;</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

https://www.homehost.com.br/blog/tutoriais/modal-bootstrap/#:~:text=%3E-,O%20que%20%C3%A9%20um%20modal%3F,se%20desfaz%20deste%20mesmo%20conte%C3%BAdo.