web-dev-qa-db-fra.com

Jquery - Comment désactiver la page entière

J'ai cet événement ajax

function save_response_with_ajax(t){
  var form = $('#edit_'+t);
  var div = $('#loading_'+t);
  $.ajax({
    url: form.attr("action"), 
    type: "POST",    
    data: form.serialize(), 
    cache: false,
    beforeSend: function(){
      form.hide();
      div.show();
    },
    complete: function(){
      div.hide();
      form.show();
    },
    success: function (result) {
    }       
  });
}

Et tout fonctionne bien, mais je veux ajouter (si possible) la possibilité de transformer en gris toute la page (le contenu/le corps) avant les événements ajax précédents, comme s’il s’agissait d’un modal (comme ceci http: //jqueryui.com/demos/dialog/#modal mais sans la boîte de dialogue)

Y-a-t'il une façon de le faire? 

Merci d'avance

Javier Q.

javascriptcssjquery-uijquery
14
JavierQQ23

Une façon de faire est d'avoir un élément de surimpression qui remplit toute la page. Si l'élément de fond a une couleur d'arrière-plan semi-transparente, la page est complètement grisée: http://jsfiddle.net/SQdP8/1/ .

Donnez-lui un z-index élevé pour qu'il soit au-dessus de tous les autres éléments. De cette façon, le rendu est correct et il intercepte tous les événements (et ne les transmet pas).

#overlay {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}​
40
pimvdb

tu peux essayer

 $("body").append('<div id="overlay" style="background-color:grey;position:absolute;top:0;left:0;height:100%;width:100%;z-index:999></div>');

alors juste utiliser

$ ("# superposition"). remove ();

s'en débarasser.

rapide et sale.

3
JKirchartz

Utilisez jQuery ajaxStart() pour ajouter une div à votre document. Définissez-le à la taille de votre document avec une forme de document semi-transparent. Ensuite, retirez-le sur ajaxStop().

2
Chris

Essayez d’ajouter un calque lors de la fonction "beforeSend":

$("body").prepend("<div class=\"overlay\"></div>");

$(".overlay").css({
    "position": "absolute", 
    "width": $(document).width(), 
    "height": $(document).height(),
    "z-index": 99999, 
}).fadeTo(0, 0.8);
2
Ash Clarke

C'est la solution complète que j'utilise:

Voici les sections:

  1. CSS pour la superposition. "fixe" est utilisé pour couvrir le contenu de la page entière, pas seulement la hauteur et la largeur de l'écran. Vous pouvez utiliser la couleur de fond ou gif

  2. S'attache à l'événement "beforeSend" de l'appel jQuery Ajax. Crée la superposition à la demande et l'affiche.

  3. À la fin de la demande, il supprime la superposition de DOM 

CSS:

.request-overlay {
    z-index: 9999;
    position: fixed; /*Important to cover the screen in case of scolling content*/
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    background: rgba(200,200,200,0.5) url('../../Images/submit-ajax-loader.gif') no-repeat center; /*.gif file or just div with message etc. however you like*/
}

JavaScript:

$.ajax({
                url: '/*your url*/',
                beforeSend: function () {
                    $('body').append('<div id="requestOverlay" class="request-overlay"></div>'); /*Create overlay on demand*/
                    $("#requestOverlay").show();/*Show overlay*/
                },
                success: function (data) {
                    /*actions on success*/
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    /*actions on error*/
                complete: function () {
                    $("#requestOverlay").remove();/*Remove overlay*/
                }
            });
2
Tejasvi Hegde
var modal = $('<div>')
  .dialog({ modal: true });

modal.dialog('widget').hide();

setTimeout(function() { modal.dialog('close'); }, 2000); // to close it

voici une démo: http://jsbin.com/avoyut/3/edit#javascript,html,live

n'oubliez pas d'appeler modal.dialog('close'); pour y mettre fin!

de cette façon, vous bénéficiez des avantages du code modal de la boîte de dialogue, du redimensionnement, de la désactivation, etc.

espérons que cela aide -ck

1
ckozl

Vous voudrez peut-être aussi indiquer à l'utilisateur qu'il se passe quelque chose, pas seulement un écran blanc/gris. Je suggérerais une sorte de chargement gif, voir this , par exemple. 

0
Charlie G

Aujourd'hui, je cherchais une solution qui conviendrait à tous les navigateurs d'IE. J'ai pris le code de @pimvdb et @Ash Clarke avec son commentaire où il a mentionné background-color: black; opacity: 0.8; may also work. For IE it will just be completely black. et est parvenu à une solution ci-dessous:

$("#first-div").prepend("<div class=\"overlay-example\"></div>");

var height1 = $("#first-div").height();
var width1 = $("#first-div").width();

$(".overlay-example").css({
    "background-color": "black",
    "z-index": "9999999",
    "position": "absolute",
    "width": width1,
    "height": height1,
    "display": "none"
}).fadeTo(0, 0.0001);

Testé dans IE8, IE9 ci-dessus. Impossible de vérifier IE7. Sera heureux de mettre à jour mon soulution au cas où vous le trouverez faux. (cela m'aiderait aussi à mettre à jour ma solution:))

Merci @pimvdb et @Ash Clarke

Demo

0
Shubh