¿Cómo construir un cuadro de diálogo o modal personalizado con JavaScript?

Construir un modal o cuadro de diálogo con JavaScript plano implica crear elementos HTML, aplicar estilos con CSS y usar JavaScript para controlar la visualización. Aquí hay una guía paso a paso para crear un modal básico y personalizado:

Paso 1: Primero, crearemos la estructura HTML básica para el modal:

<!-- El Modal -->
<div id="myModal" class="modal">

  <!-- Contenido del Modal -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Algún texto en el Modal..</p>
  </div>

</div>

• El propio modal es un div con id myModal y clase modal.
• Dentro de este div, hay un div hijo con clase modal-content para contener el contenido del modal.
• Un span con clase close se usa para crear un botón de cierre y se coloca un texto de párrafo para los datos del modal.

Paso 2: A continuación, agregaremos CSS básico para dar estilo al modal y su contenido:

/* El Modal (fondo) */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed; /* Permanece en su lugar */
  z-index: 1; /* Encima */
  left: 0;
  top: 0;
  width: 100%; /* Ancho completo */
  height: 100%; /* Altura completa */
  overflow: auto; /* Habilitar scroll si es necesario */
  background-color: rgba(0,0,0,0.4); /* Negro con opacidad */
}

/* Contenido del Modal */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% desde arriba y centrado */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Podría ser más o menos, dependiendo del tamaño de la pantalla */
}

/* El Botón de Cerrar */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

Paso 3: Finalmente, escribiremos JavaScript para manejar la apertura y el cierre del modal:

// Obtiene el modal
var modal = document.getElementById("myModal");

// Obtiene el botón que abre el modal
var btn = document.getElementById("myBtn");

// Obtiene el elemento <span> que cierra el modal
var span = document.getElementsByClassName("close")[0];

// Cuando el usuario hace clic en el botón, abre el modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// Cuando el usuario hace clic en <span> (x), cierra el modal
span.onclick = function() {
  modal.style.display = "none";
}

// Cuando el usuario hace clic en cualquier lugar fuera del modal, lo cierra
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Este JavaScript:

• Obtiene referencias al modal y al span de cierre.
• Define una función que abre el modal y asigna esa función al evento onclick del botón del modal.
• Define una función que cierra el modal y asigna esa función al evento onclick del span de cierre y cualquier clic fuera del modal.

Deberías reemplazar "myBtn" con el id del elemento que debería abrir el modal al hacer clic.

Este es un modal básico con una funcionalidad muy básica. Basado en tus necesidades, es posible que desees personalizarlo aún más (por ejemplo, múltiples modales en la misma página, modales que se cierran automáticamente después de un cierto período de tiempo, etc.). Pero el enfoque general será el mismo.