This page demonstrates how to use plain CSS to style your blocking message.

Click to block

First, disable the plugin's default styles:

// clear out plugin default styling
$.blockUI.defaults.css = {};

Second, declare whatever styles you like in your stylesheet. In general, you can simply declare the styles for the element: div.blockMsg, however if you need to style "page blocks" differently than "element blocks" then you can declare your styles for div.blockPage and div.blockElement respectively.

The following style block is used on this page:

<style type="text/css">
div.blockMsg {
    width:  40%;
    top:    30%;
    left:   30%;
    text-align: center;
    background-color: #f00;
    border: 1px solid #ddd;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); 
    -moz-opacity:.70;
    opacity:.70;
    padding: 15px;
    color: #fff;
}
</style>

That's it!