Blog ComercialWeb - São Paulo - SP
E-mail: [email protected]
E-mail: [email protected]
Vamos criar uma janela modal com HTML5 e CSS3, sem JavaScript, usando o checkbox hack. O modal terá overlay, foco no conteúdo, botão claro de fechar e tamanho fluido.
<label for="abrir-modal" class="btn">Abrir modal</label>
<input type="checkbox" id="abrir-modal" hidden>
<div class="overlay">
<div class="modal" role="dialog" aria-labelledby="titulo-modal">
<h2 id="titulo-modal">Título da Modal</h2>
<p>Conteúdo da sua modal responsiva.</p>
<label for="abrir-modal" class="fechar">Fechar</label>
</div>
</div>
.btn { display: inline-block; padding: 10px 16px; background: #990000; color: #fff; border-radius: 6px; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; place-items: center; padding: 20px; }
.modal { background: #fff; width: min(600px, 95vw); border-radius: 10px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.fechar { display: inline-block; margin-top: 10px; background: #444; color: #fff; padding: 8px 12px; border-radius: 6px; }
#abrir-modal:checked ~ .overlay { display: grid; animation: fade .2s ease; }
@keyframes fade { from{ opacity: 0; } to{ opacity: 1; } }
min()/max()/clamp() para responsividade.
