javascript 为 blockUI 使用外部 CSS 而不是内联 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8580282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use External CSS instead of inline CSS for blockUI
提问by Ajax3.14
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.
我在多个地方使用 blockUI 并且它们都具有相同的属性，所以我继续在我使用的所有地方重复相同的 css 值。有没有办法把它放到一个CSS文件中。
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
谢谢
采纳答案by Royi Namir
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 .
ps 一定不要在你写的代码中给出任何样式。
and update to something like this :
并更新为这样的：
$.blockUI({
fadeIn: 1000,
timeout: 2000,
onBlock: function() {
$(".blockPage").addClass("myClass");
}
});
回答by tonycoupland
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，将其设置为您的 css 类会将您的类添加到块中。
$.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.
但需要注意的一件事是插件代码使用内联 css，因此您需要将文本对齐、颜色、边框、背景颜色和光标等字段标记为 !important：等待。
.alertBox
{
border:none !important;
background-color: #437DD4 !important;
color: #fff !important;
cursor: default !important;
}
回答by Mina W Alphonce
this maybe an old question but here is the answer for anyone needs it
http://malsup.com/jquery/block/stylesheet.htmlbasicly you will disable the default css by this line
$.blockUI.defaults.css = {};
这可能是一个老问题，但这里是任何需要它的人的答案
http://malsup.com/jquery/block/stylesheet.html基本上您将通过此行
$.blockUI.defaults.css = {};禁用默认 css ；
and then add your css style inside a separate file or so .
然后将您的 css 样式添加到一个单独的文件中。
回答by zoggole
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:
对于动态类，添加第一个答案有效，但发生了一些闪烁，因为类添加得太晚了。所以我在 blockUI 之前添加了我的自定义类到 body 并稍微改变了我的 css，对我来说它很好用：
JS:
JS：
$('body').removeClass().addClass('myCustomClass');
$.blockUI();
CSS:
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;
}
回答by Peter
I know this is a old question but now days you can use $.blockUI.defaults.css = {};as stated in the documentation
回答by ruphus
You can define a style for your message box outside the javascript and omit the css block. In your case it could be:
您可以在 javascript 之外为消息框定义样式并省略 css 块。在你的情况下，它可能是：
<style type="text/css">
div.blockMsg {
border: '5px solid #F4712';
backgroundColor: '#6F4712';
width: '300px';
}
</style>
Look at this(v2) for further infos.
查看此(v2) 以获取更多信息。
