Oscurecer página (inhabilitarla) y mostrar cuadro con mensaje

[Bier]

Tengo un formulario, que al enviarlo tarda un poco.
Deseo desactivar la página, oscureciendola, y mostrar un div con un mensaje de "ESPERE... Procesando"

Agradeceré alguna referencia para lograr este efecto.

Gracias anticipadas.

[Artificium]

Pues eso es un efecto simple con algo de CSS y JavaScript, talvez alguien tenga algo prefabricado o te recomiende una de las tantas librerías JavaScript que existen para conseguir algo así.

[PHPeros]

También se podría/debería usar AJAX, para detectar el estado de carga.

Aquí tienes un framework hecho en jQuery:

http://mattberseth.com/blog/2008/07/...ar_widget.html

[Bier]

Iniciado por PHPeros

También se podría/debería usar AJAX, para detectar el estado de carga.

Aquí tienes un framework hecho en jQuery:

http://mattberseth.com/blog/2008/07/...ar_widget.html

El Download y ejemplos no se encuentran disponibles porque el dominio está vencido.
Tratando de encontrarlo en otra ubicación, lo encontré en: http://jqueryui.com/progressbar/#label, sin embargo ese efecto no es lo que requiero, ya que solo es un PROGRESS BAR, pero si te permite seleccionar otras partes de la página.

Lo que deseo es desactivar todos los links de la página, ya que el servidor se encuentra procesando las instrucciones, y no deseo que el usuario seleccione nada hasta que el proceso finalice.

Espero haberme explicado.

Gracias

[caricatos]

Hola:

Más o menos se trata de poner una capa al final del body con posición absoluta, y que abarque toda la página (top y left a cero y width y height al 100%)... luego otra capa con el mensaje que quieras... si pasas del explorer podrías usar position fixed... pero mi consejo es que lo primero es que la página sea accesible, y luego, si está javascript, ir modificando eventos y vistas...

Saludos

[Bier]

Iniciado por caricatos

Hola:

Más o menos se trata de poner una capa al final del body con posición absoluta, y que abarque toda la página (top y left a cero y width y height al 100%)... luego otra capa con el mensaje que quieras... si pasas del explorer podrías usar position fixed... pero mi consejo es que lo primero es que la página sea accesible, y luego, si está javascript, ir modificando eventos y vistas...

Saludos

Gracias caricaros... Así es como también supongo.
Debe ser un div para la capa de abajo y otra arriba.

Lo que requiero es ver un ejemplo, o algún tutorial donde alguien ya lo haya generado.

Te agradezco,

[herzbazi]

algo como esto?

http://www.celebrationsguatemala.com/

si te sive me avisas con gusto te ayudo

[caricatos]

Hola:

Aunque no sea lo mismo, algo similar, con su código puse en esta página: Pseudo-lightbox. La verdad es que deben ser menos líneas de código...

Saludos

[Bier]

Iniciado por herzbazi

algo como esto?

http://www.celebrationsguatemala.com/

si te sive me avisas con gusto te ayudo

Estimado herzbazi,

Es justo lo que busco... ni más ni menos.
Si me indicas algo te lo agradeceré.

Saludos y gracias

[Bier]

Iniciado por caricatos

Hola:

Aunque no sea lo mismo, algo similar, con su código puse en esta página: Pseudo-lightbox. La verdad es que deben ser menos líneas de código...

Saludos

Ya lo revisé, también se logra el efecto requerido... Lo estudiaré. Gracias.

[herzbazi]

Iniciado por Bier

Estimado herzbazi,

Es justo lo que busco... ni más ni menos.
Si me indicas algo te lo agradeceré.

Saludos y gracias

si necesitas con gusto te ayudo

[Bier]

Iniciado por herzbazi

si necesitas con gusto te ayudo

herzbazi,

Si lo puedes indicar sería de gran ayuda...
El único detalle es que el efecto aparece al entrar a la web, lo que yo deseo es que primero me permita leer el contenido y luego aparezca el efecto.

He estado revisando el ejemplo de Caricatos y este lo hace en la forma que lo requiero.

Analizaré la recomendación de Caricatos también, él ya tiene todo disponible en su web, y si tu lo puedes compartir ayudaría mucho a crear un mejor efecti final.

Gracias anticipadas.
Saludos...

[herzbazi]

Iniciado por Bier

herzbazi,

Si lo puedes indicar sería de gran ayuda...
El único detalle es que el efecto aparece al entrar a la web, lo que yo deseo es que primero me permita leer el contenido y luego aparezca el efecto.

He estado revisando el ejemplo de Caricatos y este lo hace en la forma que lo requiero.

Analizaré la recomendación de Caricatos también, él ya tiene todo disponible en su web, y si tu lo puedes compartir ayudaría mucho a crear un mejor efecti final.

Gracias anticipadas.
Saludos...

ok mira revisa el ejemplo de nuestro amigo y compañero y si necesitas ayuda no dudes en escribir ok

[caricatos]

Hola:

Unas pocas líneas:

Código:

function tag(id) {return document.getElementById(id);}
var oscuro = false;
function oscurecer() {
 if (!oscuro) {
  d = document.createElement("div");
d.id = "obscuro"
  d.style.position = "fixed";
  d.style.top = "0";
  d.style.left = "0";
  d.style.opacity = 0;
  d.style.width = "100%";
  d.style.height = "100%";
  d.style.backgroundColor = "black";
  document.body.appendChild(d);

 }
for (i = 0; i < 100; i++) setTimeout("tag('obscuro').style.opacity = " + i / 10, i * 100);
 
}

En la capa a mostrar faltaría un botón para "aclarar"...

Saludos

[Bier]

Iniciado por herzbazi

ok mira revisa el ejemplo de nuestro amigo y compañero y si necesitas ayuda no dudes en escribir ok

Gracias por tu recomendación herzbazi,

Has respondido 3 veces a este hilo, pero en ninguna has publicado aportación alguna al tema.

No requiero me lo resuelvas, pero si conoces la fuente en donde lo pueda consultar lo agradeceré... O quizá no entiendo tu planteamiento acerca de consultarte.

¿Que has querido decir con "si necesitas ayuda no dudes en escribir" ??

Si no tienes algún aporte a mi solicitud, te pido ignores mis solicitudes, y si tienes algo que aportar te lo agradeceré, y seguramente otros más también.

Te envío un saludo.

[Bier]

Iniciado por caricatos

Hola:

Unas pocas líneas:

Código:

function tag(id) {return document.getElementById(id);}
var oscuro = false;
function oscurecer() {
 if (!oscuro) {
  d = document.createElement("div");
d.id = "obscuro"
  d.style.position = "fixed";
  d.style.top = "0";
  d.style.left = "0";
  d.style.opacity = 0;
  d.style.width = "100%";
  d.style.height = "100%";
  d.style.backgroundColor = "black";
  document.body.appendChild(d);

 }
for (i = 0; i < 100; i++) setTimeout("tag('obscuro').style.opacity = " + i / 10, i * 100);
 
}

En la capa a mostrar faltaría un botón para "aclarar"...

Saludos

Estimado Caricatos, mucho muy agradecido con tu aportación... Lo probaré y aquí mismo respondo.

Saludos.