jQuery BlockUI Plugin

Question

I need to add an overlay to Ajax events in my MVC application and have found the jQuery BlockUI Plugin. I have no experience in Jquery

I can get it to work fine with the default settings, $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

My problem is when I try to modify the settings to something similar to the following example on the site, such as custom message or background, it doesn't work. Can someone advise the correct way to apply the following to all Ajax requests?

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

Answer 1

You're not closing

$.blockUI

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

See this fiddle.