ajax loading sendet modal vor und nach dem vollständigen

Question

before send 
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] 
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] 
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] 
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] 
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] 
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] 
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] 
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] 
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] 
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] 
complete send 

Das ist meine Konsole aus diesem Ajax-Request löschte

$.ajax({ 
    type: 'POST', 
    url: '.php', 
    dataType: "json", 
    data: { 
     lname: lname, 
     fname: fname 
    }, 
    success: function(data) { 
     console.log(data) 

    }, 
    error: function(data) { 
     //console.log("error" + data); 
    }, 
    beforeSend: function() { 
     console.log('before send') 
     $('#modal').show(); 
    }, 
    complete: function() { 
     console.log('complete send') 
     $('#modal').hide(); 
    } 
}) 

Das ist mein modal div

<div id="modal"></div> 

Stil als

#modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    top:  0; 
    left:  0; 
    height:  100%; 
    width:  100%; 
    background: rgba(255, 255, 255, .8) 
       //url('http://sampsonresume.com/labs/pIkfp.gif') 
       url('images/ajax-loader.gif') 
       50% 50% 
       no-repeat; 
} 

#modal { 
    overflow: hidden; 
} 
#modal { 
    display: block; 
} 

Aber das Problem ist, dass mein Div Modal nicht sho ist Flügel. Die Konsole ist in Ordnung. Erste before send erscheint dann die Daten geladen sind dann complete send

Answer 1

Versuchen Sie, die kommentiert url in Ihrem #modal CSS zu entfernen:

#modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    top:  0; 
    left:  0; 
    height:  100%; 
    width:  100%; 
    background: rgba(255, 255, 255, .8) 
       url('images/ajax-loader.gif') 
       50% 50% 
       no-repeat; 
} 

Answer 2

Verwenden zeigen die modale

$('#modal').show(); 
    $.ajax({...}); 

oder in Ihnen Fall anzuzeigen, wenn Ajax auf Seite ausgelöst wird, bereit nur die modale als Standard angezeigt werden mit CSS

#modal { 
    display: block; 
} 

Answer 3

vielleicht ist es passiert so schnell, dass man es nicht sehen kann, wie ein Timeout verwenden unter

complete: function() { 
    console.log('complete send'); 
    setTimeout(function(){ 
     $('#modal').hide(); 
    }, 1000); 
} 

um zu sehen, ob es einen Unterschied gibt.