Ventana de alerta para AJAX con Javascript, DOM y CSS

Por: joarobles

3 de Noviembre del 2008

513 de clabLevel
Otros artículos de joarobles

8,941 visitas

javascript css ajax dom

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) {

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";

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

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";

Código :

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

Código :

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

return true;
}

También te interesa

• Recargar pagina al cerrar colorbox o nyroModal
• Visualizar menús desplegables por encima de películas Flash
• Sustituir un SWF por otro sin refrescar el HTML con Ajax

javascript css ajax dom

excelente me copan los tips de ajax

un ejemplin no estaria nada mal
Por: danyrik

<script type="text/javascript">

alerta("Este es mi mensaje", "Este es el texto de mi mensaje <br/> y puedo escribir mas y mas...");

</script>

<script type="text/javascript">
alerta("Este es mi mensaje", "Este es el texto de mi mensaje <br/> y puedo escribir mas y mas...");
</script>

fondo.style.position = "absolute"; 

fondo.style.position = "fixed"; 

haber me han mandado hacer que la alerta para aceptar o denegar sea en light sreen pero no encuentro nada con ese nombre porque por lo visto me han dixo que lo cambiaron de nombre...Alguien sabe?
Por: Marioooo-blog

Por favoorr ayudaaaaa
Por: Marioooo-blog

Hola me podrian dar algun ejemplo de como eliminar datos de una bd marcando con un checkbox y que me elimine y a la vez me resfresque sin el dato que he marcado y todo esto que se con ajax.Por favor si sabeis Ayudarme que solo lo consigo en php .Gracias
Por: Mariooooo-blog