jquery - card - overlay css

barra de carga superposición jquery div

Question

Así que tengo una tabla de datos, y estoy obteniendo datos utilizando ajax. Cuando se recuperan los datos, los datos de la tabla desaparecen y aparece un pequeño círculo de carga. Prefiero que los datos permanezcan (sé cómo hacerlo) y que el círculo de carga aparezca sobre la tabla en el centro de la misma (no necesariamente verticalmente, solo al menos horizontalmente), junto con un bloqueo de fondo ligeramente transparente Fuera de la vista de la tabla un poco (no el resto de la página web). ¿Cómo puedo hacer que un div aparezca sobre la mesa y hacer eso?

Answer 1

[ Verlo en acción ]

HTML

<div id="overlay">
  <img src="http://www.sanbaldo.com/wordpress/wp-content/bigrotation2.gif" 
    id="img-load" />
</div>

CSS

#overlay { 
  display:none; 
  position:absolute; 
  background:#fff; 
}
#img-load { 
  position:absolute; 
}

Javascript

$t = $("#table"); // CHANGE it to the table''s id you have

$("#overlay").css({
  opacity : 0.5,
  top     : $t.offset().top,
  width   : $t.outerWidth(),
  height  : $t.outerHeight()
});

$("#img-load").css({
  top  : ($t.height() / 2),
  left : ($t.width() / 2)
});

Luego, cuando estás cargando cosas, simplemente dices:

$("#overlay").fadeIn();

Y cuando hayas terminado:

$("#overlay").fadeOut();

Nota: la imagen de carga aparece centrada vertical y horizontalmente según lo solicitado. Además, solo la tabla tendrá la superposición no toda la página tal como se solicitó.

Answer 2

Esto funcionó para mí, pero solo una cosa con la superposición, ya que se desplazó hacia la izquierda.

Agregué una línea al javascript y funcionó perfectamente en Chrome, Firefox y Safari (en Windows).

$("#overlay").css({
  opacity : 0.5,
  top     : $t.offset().top,
  width   : $t.outerWidth(),
  height  : $t.outerHeight(),
  left    : $t.position().left // the fix.
});

Answer 3

bueno, puedes intentar usar la posición css: absoluta para el círculo de carga

Answer 4

simplemente use el método .html() jQuery para inyectar el nuevo div con un círculo de carga en el div que sostiene la mesa. Luego usa css para darle estilo. tal vez darle una imagen de fondo que sea opaca. y posicionar relativamente o absolutamente el círculo de carga.

di que tienes

<div id="table_container>
    <table>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
    </table>
</div>

al cargar el nuevo uso de datos:

$(''div#table_container'').html(''<div id="overlay"><img src="path/to/loading/img.png" class="loading_circle" alt="loading" /></div>'');

y el estilo algo así como:

#overlay {
    width: 100%;
    background: url(''path/to/opaque/img.png'') repeat;
    position: relative;
}

#overlay img.loading_circle {
    position: absolute;
    top: 50%;  // edit these values to give you
    left: 50%; // the positioning you''re looking for.
}