wake-up-neo.net

Jquery - So deaktivieren Sie die gesamte Seite

Ich habe dieses Ajax-Event

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) {
    }       
  });
}

Und alles funktioniert gut, aber ich möchte hinzufügen (falls möglich) die Möglichkeit, die gesamte Seite (den Inhalt/Körper) in grau zu verwandeln, bevor ajax -Ereignisse abgeschlossen werden, als wäre es ein Modal (wie dieses http: //jqueryui.com/demos/dialog/#modal aber ohne den Dialog)

Gibt es eine Möglichkeit, dies zu tun? 

Danke im Voraus

Javier Q.

14
JavierQQ23

Eine Möglichkeit, dies zu tun, besteht darin, ein Überlagerungselement zu haben, das die gesamte Seite ausfüllt. Wenn das Überlagerungselement eine halbtransparente Hintergrundfarbe hat, wird die Seite vollständig grau dargestellt: http://jsfiddle.net/SQdP8/1/ .

Geben Sie ihm einen hohen z-index, damit er sich auf allen anderen Elementen befindet. Auf diese Weise wird es richtig dargestellt und fängt alle Ereignisse ein (und leitet sie nicht weiter).

#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

du kannst es versuchen

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

dann einfach benutzen

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

es loswerden.

schnell und schmutzig.

3
JKirchartz

Verwenden Sie jQuery ajaxStart(), um ein Div an Ihr Dokument anzuhängen. Legen Sie die Größe Ihres Dokuments mit einer Art halbtransparentem Dokument fest. Dann entfernen Sie es von ajaxStop().

2
Chris

Versuchen Sie, während der Funktion "beforeSend" ein Overlay anzufügen:

$("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

Dies ist die komplette Lösung, die ich verwende:

Folgende sind die Abschnitte:

  1. CSS für die Überlagerung. "Fest" wird verwendet, um den gesamten Seiteninhalt abzudecken, nicht nur die Bildschirmhöhe und -breite. Sie können Hintergrundfarbe oder GIF verwenden

  2. Fügt sich an das Ereignis "beforeSend" eines Ajax-Aufrufs von jQuery an. Erzeugt das Overlay bei Bedarf und zeigt es.

  3. Nach Abschluss der Anforderung wird die Überlagerung von DOM entfernt 

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

hier ist eine Demo: http://jsbin.com/avoyut/3/edit#javascript,html,live

vergiss nicht, modal.dialog('close'); anzurufen, um alles zu beenden!

auf diese Weise erhalten Sie die Vorteile des aktuellen Dialogmodalcodes, die Größenänderung, Deaktivierung usw.

hoffe das hilft -ck

1
ckozl

Möglicherweise möchten Sie dem Benutzer einen Hinweis darauf geben, dass auch etwas passiert, nicht nur ein leerer/grauer Bildschirm. Ich würde eine Art Gif vorschlagen, siehe zum Beispiel this

0
Charlie G

Heute habe ich nach einer Lösung gesucht, die für alle Browser des IE funktioniert. Ich habe den Code von @pimvdb und @Ash Clarke zusammen mit seinem Kommentar genommen, in dem er background-color: black; opacity: 0.8; may also work. For IE it will just be completely black. erwähnte, und bin zu einer Lösung gekommen:

$("#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);

Getestet in IE8, IE9 oben. Konnte nicht nach IE7 suchen. Gerne aktualisiere ich meine Soulution, falls Sie es falsch finden. (es würde mir auch helfen, meine Lösung zu aktualisieren:))

Danke @pimvdb und @Ash Clarke

Demo

0
Shubh