jquery-ui - bootstrap - spinner input jquery

Con jQuery, ¿cómo puedo poner gris y desactivar una página web y luego mostrar algún tipo de spinner sobre eso?

Question

Todavía soy bastante "verde" cuando se trata de desarrollo web y programación javascript / jQuery, por lo que cualquier ayuda es apreciada. Esto es lo que quiero hacer.

1. Quiero hacer lo mismo que hace un cuadro de diálogo de la interfaz de usuario de jQuery donde coloca una imagen semitransparente en toda la página y desactiva el clic de cualquiera de los controles que se encuentran debajo.

2. Quiero saber cómo podría poner una especie de superposición de spinner en la parte superior para mostrar que el sitio web funciona en segundo plano. Si puedo usar un archivo GIF animado que estaría bien, pero no estoy seguro del mejor enfoque para esto.

Aquí hay un ejemplo del efecto atenuado con un cuadro de diálogo: jQuery UI Example . Quiero saber cómo producir este efecto sin el cuadro de diálogo en la parte superior. No tengo un buen ejemplo del comportamiento del hilandero.

Todas las sugerencias, referencias de sitios web y códigos son apreciados.

EDITAR: No me refiero a un "control giratorio". Trataré de encontrar un ejemplo de lo que estoy pensando en spinner.

EDITAR: Lo que quiero decir con "spinner" es un gif de carga de algún tipo como el "GIF Indicator Big" en este sitio web: http://ajaxload.info/

Answer 1

¿Por qué no utilizas "modal: true"?

    $(function () {
        $("#dialog").dialog($.extend({}, dialogOptions, {
            autoOpen: false,
            width: 500,
            modal: true,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "fade",
                duration: 1000
            }
        }));

        $("#profile_edit").click(function () {
            $("#dialog").dialog("open");
        });

        $("#save_and_close").click(function () {
            $("#dialog").dialog("close");
        });
    });

Answer 2

Puedes usar algo como este código jquery. Pase la identificación del elemento que desea permanecer en la parte superior de la página:

function startModal(id) {
    $("body").prepend("<div id=''PopupMask'' style=''position:fixed;width:100%;height:100%;z-index:10;background-color:gray;''></div>");
    $("#PopupMask").css(''opacity'', 0.5);  
    $("#"+id).data(''saveZindex'', $("#"+id).css( "z-index"));
    $("#"+id).data(''savePosition'', $("#"+id).css( "position"));
    $("#"+id).css( "z-index" , 11 );
    $("#"+id).css( "position" , "fixed" );
}
function stopModal(id) {
    if ($("#PopupMask") == null) return;
    $("#PopupMask").remove();
    $("#"+id).css( "z-index" , $("#"+id).data(''saveZindex'') );
    $("#"+id).css( "position" , $("#"+id).data(''savePosition'') );
}

Answer 3

Siempre me gusta usar el complemento jQuery BlockUI: http://malsup.com/jquery/block/

Mira las demostraciones, probablemente encontrarás algo que estás buscando allí.

Answer 4

Una forma de hacerlo es tener un div que está oculto por defecto y tiene propiedades para establecer el color de fondo a gris (# 666 por ejemplo) y su transparencia a algo así como 0.8.

Cuando desee mostrar use jQuery para obtener el tamaño de la pantalla / ventana del navegador, configure el tamaño de su div y muéstrelo con un zindex alto, para que se muestre en la parte superior. También puede darle a este div su gráfico spinner gif (sin repetición y centrado).

Código:

#json-overlay {
    background-color: #333;
    opacity: 0.8;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 100;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url(''ajax-loader.gif'');
    background-position: center;
    background-repeat: no-repeat;
}

Solo elementos de los que hay que tener cuidado son los elementos seleccionados en IE6, ya que se mostrarán a través del div, por lo que puedes usar jQuery bgframe para resolver eso, o lo que hice en el pasado es simplemente ocultar elementos seleccionados al mostrar el div y mostrar ellos otra vez cuando ocultas tu div

Answer 5

puedes usar div simple y luego eventos ajaxstart y ajaxstop

<div id="cover"></div>

$(''#cover'')
    .hide()
    .ajaxStart(function () {
        $(this).fadeIn(100);
    })
    .ajaxStop(function () {
        $(this).fadeOut(100);
    });