Question

I am lost with this idea of mine. I have never made a loading screen and do not even know where to begin.

Here is the call I am making:

$('.ranks').change(function () {
                if (this.checked) {
                    getRanks($(this).val());
                }
            });

Here is the function:

function getRanks(rankid) {
            $.getJSON('message_center_getMessageLists.asp', { rankid: rankid }, function (json) {
                var options = '';
                $.each(json.rank, function (i, item) {
                    options += '<option value="' + item.distID + '">' + item.name + ' (' + item.distID + ')</option>';
                });
                $('#fromList').find('option')
                        .remove()
                        .end()
                $('#fromList').append(options);
            })
                    .error(function () { alert("There was an error while trying to make this request;  If it persists please contact support"); })
                    ;
        }

I have not been able to get anything working yet, so above is my original code before my attempt. I have the loading.gif. I tried to use toggleClass to add the loading css to the body, but the loading screen appears behind everything, tried to use z-index and that wouldn’t bring it out front. I’m at a loss.

Here is the CSS I am using, it was something another individual wrote and I was trying to duplicate his work but am having issues.

.loading{
        background-image:url(newloader.gif);
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-position: center center;
    }

Answer 1

Here’s how I do it:

css
    .modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    z-index: 1;
}

js
$('body').append('<div class="modal">');

I append it on beforeSend() in the ajax call and remove it on success. Something like that.