Is there anyway to change the background color of blockUI after an ajax call?

Question

I have an ajax call where i first call blockUI first to show a message that says . .

"Saving Project..."

doing somethin like:

<span style="display:none" id="Message"><h2>Saving Project...</h2></span

 $("mySpan").block({ message:  $("#Message") });

After the ajax call returns, I want to change the text to say

"Successfully saved Project"

I am able to change the text using this question but i want to change the CSS of the popup at the same time. Is this possible? If i change the CSS of the actual span like this:

 $("#Message").addClass("darkBackgroundColor");

it works but only changes the background of the text (NOT the whole blockUI). I want to change the whole popup box

Can i change the background color of the blockUI popup without closing and creating a new one?

Answer 1

This is a long shot without seeing the code... but you can change the class of your whole box, and adjust the CSS rules for that class appropriately.

Or see the docs, there are at least 10 ways to do it: http://malsup.com/jquery/block/#demos

If you can do it for the message, you can do it for the whole block. So instead:

$("#Message").addClass("darkBackgroundColor");

you can add parent() to it:

$("#Message").parent().addClass("darkBackgroundColor");

or simply select the class directly (see which element exactly you need, maybe blockMsg or blockPage...):

$(".blockUI").addClass("darkBackgroundColor");

or this:

$(".blockMsg").css("background-color", "#b4f9b6");