javascript - Use External CSS instead of inline CSS for blockUI - Stack Overflow

admin管理员组

文章数量:1193748

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

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

• javascript
• jquery

Share Improve this question Follow asked Dec 20, 2011 at 18:38 Ajax3.14Ajax3.14 1,69555 gold badges2424 silver badges4242 bronze badges

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 7

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");

            } 
        }); 

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; 
}

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;
}

this maybe an old question but here is the answer for anyone needs it http://malsup.com/jquery/block/stylesheet.html basicly you will disable the default css by this line
$.blockUI.defaults.css = {};

and then add your css style inside a separate file or so .

You can define a style for your message box outside the javascript and omit the css block. In your case it could be:

<style type="text/css">
 div.blockMsg {
  border: '5px solid #F4712';
  backgroundColor: '#6F4712';
  width: '300px'; 
 }
</style>

Look at this (v2) for further infos.

I know this is a old question but now days you can use $.blockUI.defaults.css = {}; as stated in the documentation

本文标签： javascriptUse External CSS instead of inline CSS for blockUIStack Overflow