Ventana Modal

by Slee

HTML

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Ventana Modal</title>
    <link rel="stylesheet" href="estilos.css" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
  </head>
  <body>
    <input type="checkbox" id="btn-modal" />
    <label for="btn-modal" class="lbl-modal">Abrir Modal</label>
    <div class="modal">
      <div class="contenedor">
        <header>¡Bienvenidos!</header>
        <label for="btn-modal">X</label>
        <div class="contenido">
          <h3>Contenido del Modal</h3>
          <p>
            Aquí puedes agregar el contenido de la ventana modal, como mensajes,
            alertas o formularios.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");

/* Estilos generales */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

/* Fondo de la página */
body {
  background: url("https://cdn.pixabay.com/photo/2023/10/30/05/53/highway-8351864_1280.jpg");
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
}

/* Centrado de la ventana modal */
body,
.modal {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: all 500ms ease;
  opacity: 0;
  visibility: hidden;
}

/* Mostrar la ventana modal cuando el checkbox está activado */
#btn-modal:checked ~ .modal {
  opacity: 1;
  visibility: visible;
}

.contenedor {
  width: 400px;
  height: 300px;
  margin: auto;
  background: #fff;
  box-shadow: 1px 7px 25px rgba(0, 0, 0, 0.6);
  transition: all 500ms ease;
  position: relative;
  transform: translateY(-30%);
}

/* Animación de aparición */
#btn-modal:checked ~ .modal .contenedor {
  transform: translateY(0%);
}

.contenedor header {
  padding: 10px;
  background: #db8046;
  color: #fff;
}

.contenedor label {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.contenido {
  width: 100%;
  padding: 10px;
}

.contenido h3 {
  margin-bottom: 10px;
}

.contenido p {
  margin-bottom: 7px;
}

#btn-modal {
  display: none;
}

/* Botón para abrir el modal */
.lbl-modal {
  background: #fff;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

/* Responsive */
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .contenedor {
    width: 95%;
  }
}