Avec jQuery, Comment puis-je griser et désactiver une page Web, puis montrer une sorte de spinner en plus de cela?
Je suis toujours assez "vert" quand il s'agit de développement web et de programmation javascript/jQuery, donc toute aide est appréciée. Voici ce que je veux faire.
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 ci-dessous.
Je veux savoir comment je pourrais mettre une sorte de toupie se superposer à montrer que le site internet fonctionne dans le fond. Si je peux utiliser un fichier GIF animé, ce serait bien, mais je ne suis pas tout à fait sûr de la meilleure approche à cela.
Voici un exemple de l'effet grisé avec une boîte de dialogue: exemple D'interface utilisateur jQuery . Je veux savoir comment produire cet effet sans la boîte de dialogue en haut. Je n'ai pas un bon exemple du comportement de spinner.
Toutes les suggestions, les références de sites Web et le code sont appréciés.
EDIT: Je ne veux pas dire un "contrôle spinner". Je vais essayer de trouver un exemple de ce à quoi je pense par spinner.
EDIT: 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/
5 réponses
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 de l'écran/du navigateur, définissez la taille de votre div et affichez-la avec un zindex élevé, de sorte qu'elle s'affiche sur le dessus. 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 select dans IE6, car ceux-ci apparaîtront à travers la div, de sorte que vous pouvez utiliser jQuery bgframe pour résoudre cela, ou ce que j'ai fait dans le passé est simplement masquer les éléments select lors de l'affichage de la div et de les montrer à nouveau en cachant votre div
J'aime toujours utiliser le plugin jQuery BlockUI: http://malsup.com/jquery/block/
Découvrez les démos, vous trouverez probablement quelque chose que vous cherchez là-bas.
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");
});
});
Vous pouvez utiliser quelque chose comme jquery. Transmettre l'id de l'élément que vous voulez rester 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') );
}
Vous pouvez utiliser simple div, puis ajaxstart et ajaxstop event
<div id="cover"></div>
$('#cover')
.hide()
.ajaxStart(function () {
$(this).fadeIn(100);
})
.ajaxStop(function () {
$(this).fadeOut(100);
});