Use External CSS instead of inline CSS for blockUI

Question

I am using blockUI in multiple places and they all have the same properties so i keep on repeating the same css values in all the place I use. is there a way to put it into a CSS file.

currently i use:

$.blockUI({
        message: $('#Something'),
        css: {
            border: '5px solid #F4712',
            backgroundColor: '#6F4712',
            width: '300px'
        }
    });

can i use like:

$.blockUI({
    message: $('#Something'),
        css: {
            class:"alertBox"
        }
    });

thanks

Answer 1

according to the documentation - you can't.

but you to do that :

the class $(".blockPage").addClass("myClass")

p.s. be sure not to give any styles in the code as you wrote .

and update to something like this :

  $.blockUI({ 
            fadeIn: 1000, 
            timeout:   2000, 
            onBlock: function() { 
               $(".blockPage").addClass("myClass");

            } 
        }); 

Answer 2

I was half way through modifying my copy of the blockUI plugin to add this functionality and found there was already a config option for blockMsgClass, setting this to your css class adds your class to the block.

$.blockUI(
{
    blockMsgClass: 'alertBox',
    message: 'Hello styled popup'
});

One thing to note though is that the plugin code uses inline css so you need to mark as !important for fields such as text-align, color, border, background-color and cursor: wait.

.alertBox
{
    border:none !important;
    background-color: #437DD4 !important;
    color: #fff !important;
    cursor: default !important; 
}

Answer 3

For dynamic class adding the first answer worked, but some flicker occured, because the class was added too late. So I added my custom class before the blockUI to the body and changed my css a bit and for me it works great:

JS:

$('body').removeClass().addClass('myCustomClass');
$.blockUI();

CSS:

div.blockPage{// default layout
width:  30%;
top:    40%;
left:   35%;
text-align:center;
}

body.myCustomClass > div.blockPage{
width: 90%;
left: 5%;
top: 3%; 
text-align:left;
}