Clever Geek Handbook

Change display text and font size of ui block

I am using blockUI in my first project. The script below shows how I use 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 a click event occurs, a block is displayed with the text "Please wait ...". I don't know where this text is from, I would like to change the text as follows:

  • change the size of the font used to display the text
  • add the image of the spinning wheel to the text "Wait ...".

Can anyone help with this?

+3


source to share


2 answers


Use the parameter for this message

.

The doc is here http://jquery.malsup.com/block/#options



For egs

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


source


Try this:



    $.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'
    });
+2


source






More articles:


All Articles