Changing displayed text and font size of block ui

Question

I am using blockUI in my first project. The script below shows how I am using it:

$(document).ready(function(){
    $('#elem').click(function(e){

            $.blockUI({ css: { 
                border: 'none', 
                padding: '15px', 
                backgroundColor: '#000', 
                '-webkit-border-radius': '10px', 
                '-moz-border-radius': '10px', 
                opacity: .5, 
                color: '#fff' 
            } }); 

            setTimeout($.unblockUI, 2000);  

    });
});

When the click event occurs, the block is shown, with the text 'Please wait ...'. I don't know where this text is coming from, I would like to modify the text as follows:

• change the size of the font used to display the text
• add an image of a spinning wheel to the 'Please Wait ..' text

Can someone help with this?

Answer 1

Use message option for this.

Document here http://jquery.malsup.com/block/#options

For egs,

$.blockUI({message:'<img src="your-image-path-here" alt="Please Wait" />',...});

Answer 2

Try it this way:

    $.blockUI(
    {
        css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .5, 
            color: '#fff',
            fontSize:'16px'
        },
        message: 'Your custom message'
    });