Adding text to a jquery wait animation

Question

I have the following code, which I found at: How can I create a "Please Wait, Loading..." animation using jQuery?, and successfully implemented.

Now, I'd like to display text right above the image. It can be many different messages. Can that be done?

CSS

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

body.loading {
    overflow: hidden;
}

body.loading .modal {
    display: block;
}

HTML

<div class="modal"></div>

jQuery

$(document).on({
    ajaxStart: function() {
        $body.addClass("loading");
    },
    ajaxStop: function() {
        $body.removeClass("loading");
    }
});

Answer 1

Here is one possible way...

Modify your jQuery

$(document).on({
    ajaxStart: function() {
        $body.addClass("loading");
        $('.modal').attr("data-message","I'm a message!");
    },
    ajaxStop: function() { $body.removeClass("loading"); }    
});

Add this to your CSS

.modal:before {
    content: attr(data-message);
    position: fixed;
    width: 100%;
    text-align: center;
    top: 50%;
    margin-top: -40px;
}

DEMO

---

EDIT

It can be many different messages.

As in selected from an array? ...

var messageArray = ["I'm a message", "Hello", "Lorem Ipsum"];

$(document).on({
    ajaxStart: function() {
        $body.addClass("loading");
        $('.modal').attr("data-message",messageArray[Math.floor(Math.random() * messageArray.length)]);
    },
    ajaxStop: function() { $body.removeClass("loading"); }    
});

DEMO