Search code examples
jqueryblockui

Changing displayed text and font size of block ui

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?

Solution

  • 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" />',...});