web-dev-qa-db-fra.com

Avec jQuery, comment puis-je griser et désactiver une page Web, puis afficher une sorte de spinner en plus?

Je suis toujours assez "vert" en ce qui concerne le développement web et la programmation javascript/jQuery, donc toute aide est appréciée. Voici ce que je veux faire.

  1. Je veux faire la même chose qu'une boîte de dialogue jQuery UI où elle place une image semi-transparente sur toute la page et désactive le clic sur l'un des contrôles en dessous.

  2. Je veux savoir comment je pourrais mettre une sorte de superposition de spinner sur le dessus pour montrer que le site Web fonctionne en arrière-plan. Si je peux utiliser un fichier GIF animé, ce serait bien, mais je ne suis pas sûr de la meilleure approche.

Voici un exemple de l'effet grisé avec une boîte de dialogue: jQuery UI Example . Je veux savoir comment produire cet effet sans la boîte de dialogue en haut. Je n'ai pas un bon exemple du comportement du spinner.

Toutes les suggestions, références de sites Web et codes sont appréciés.

ÉDITER: Je ne parle pas d'un "contrôle spinner". Je vais essayer de trouver un exemple de ce à quoi je pense par spinner.

ÉDITER: Ce que je veux dire par "spinner" est un gif de chargement d'une sorte comme le gif "Indicator Big" sur ce site: http://ajaxload.info/

jquery-uioverlay
27
Mike Webb

Une façon de le faire est d'avoir un div qui est caché par défaut et a des propriétés pour définir la couleur d'arrière-plan sur un gris (# 666 par exemple) et sa transparence sur quelque chose comme 0,8.

Lorsque vous souhaitez afficher, utilisez jQuery pour obtenir la taille de la fenêtre écran/navigateur, définissez la taille de votre div et affichez-la avec un zindex élevé, afin qu'elle s'affiche en haut. Vous pouvez également donner à cette div votre graphique gif spinner (pas de répétition et centré).

Code:

#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;
}

Seules les choses à surveiller sont les éléments sélectionnés dans IE6, car ils apparaîtront à travers le div, vous pouvez donc utiliser jQuery bgframe pour résoudre ce problème, ou ce que j'ai fait dans le passé est simplement masquer les éléments de sélection lors de l'affichage du div et de l'affichage à nouveau lorsque vous cachez votre div

32
mikeq

J'aime toujours utiliser le plugin jQuery BlockUI: http://malsup.com/jquery/block/

Découvrez les démos, vous y trouverez probablement quelque chose que vous recherchez.

57
WillCodeForCoffee

Pourquoi n'utilisez-vous pas simplement "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");
        });
    });
4
mila

Vous pouvez utiliser quelque chose comme ce code jquery. Passez l'identifiant de l'élément que vous souhaitez conserver en haut de la page:

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') );
}
1
Renzo Ciot

vous pouvez utiliser un simple div puis un événement ajaxstart et ajaxstop

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

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