Ventana de alerta para AJAX con Javascript, DOM y CSS

En este tip les mostraré como armé esta ventana de alerta para AJAX, con DOM y CSS... la idea es entregar una base para agregar funcionalidades tales como drag, eventos de salida, etc:

Esta es la base:

alerta.js

Código :

function alerta(titulo, texto) {

Primero definimos la función, que recibirá el titulo de la alerta mas el texto del contenido... Además, trabajaremos con una imagen llamada fondo.gif, que será el fondo de la ventana mientras se muestra la alerta (yo elegí una imagen de 4 píxeles con 3 transparentes para que se opaque el contenido bajo la alerta) y definimos un div contenedor de nuestra ventana de alerta llamado fondo como sigue:

Código :

var fondo = document.createElement('div');
      fondo.style.backgroundImage = "url(img/fondo.gif)";
      fondo.style.position = "absolute";
      fondo.style.width = "100%";
      fondo.style.height = "100%";
      fondo.style.top = "0px";
      fondo.style.left = "0px";
      fondo.style.verticalAlign = "middle";
      fondo.align = "center";

Ahora bien, tenemos el fondo, pero necesitamos además crear la ventana de alerta que contendrá lo siguiente:

• Una barra de titulo
  
• Un contenedor con el texto de la alerta
  
• Un contenedor con el boton "Aceptar"
  

veamos como sigue:

Código :

var ventana = document.createElement('div');
      ventana.style.width = "200px";
      ventana.style.margin = "5px";
      ventana.style.border = "solid 1px #999999";
      ventana.style.backgroundColor = "#FFFFFF";
      
      var barraTitulo = document.createElement('div');
         barraTitulo.style.backgroundColor = "#e2e3e5";
         barraTitulo.innerHTML = titulo;
      
      var contenido = document.createElement('div');
         contenido.style.padding = "5px";
         contenido.innerHTML = texto;
      
      var cerrar = document.createElement('div');
         cerrar.style.padding = "5px";

Ahora bien, tenemos que crear un botón de tipo input al cual le asignaremos la acción de ocultar nuestra ventana de alerta y dejar nuestra pagina como estaba anteriormente:

Código :

var boton = document.createElement('input');
            boton.type = "button";
            boton.value = "Aceptar";
            boton.onclick = function() {
               fondo.style.visibility = "hidden";
            }

Bien, solo queda agregar estos contenedores a donde correspondan para poder finalizar mostrando la ventana en el body:

Código :

ventana.appendChild (barraTitulo);
      ventana.appendChild (contenido);
      ventana.appendChild (cerrar);
      
   fondo.appendChild (ventana);
   document.body.appendChild(fondo);

return true;
}

Retornamos y esa es todo el código necesario para mostrar la ventana de alerta que se llama mediante alerta(titulo, texto). Espero que les haya servido, saludos!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.