使用外部CSS代替内联CSS来为BlockUI提供样式

Question

我在多个地方使用blockUI，并且它们都具有相同的属性，因此我不得不在每个使用的地方重复相同的CSS值。是否有一种方法将其放入CSS文件中。

目前我使用：

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

我可以用像这样的格式吗？

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

thanks

- Ajax3.14

Answer 1

我正在修改blockUI插件以添加此功能，但发现已经有一个配置选项blockMsgClass，将其设置为您的CSS类即可将您的类添加到该块中。

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

需要注意的一点是，插件代码使用内联CSS，因此对于文本对齐、颜色、边框、背景颜色和光标等字段，您需要将其标记为!important。

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

- tonycoupland

Answer 2

根据文档，你无法这样做。

但是你可以这样做：

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

请确保在代码中不要设置任何样式，就像您所编写的那样。

并更新为类似于以下内容：

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

            } 
        }); 

- Royi Namir

Answer 3

也许这是一个老问题，但以下答案适用于需要它的任何人 http://malsup.com/jquery/block/stylesheet.html 简单来说，您可以通过以下代码禁用默认的CSS样式
$.blockUI.defaults.css = {};

然后在另一个文件中添加您自己的CSS样式即可。

- Mina W Alphonce

Answer 4

对于动态添加类，第一个答案可以工作，但是会出现一些闪烁，因为类添加得太晚了。所以我在blockUI之前将我的自定义类添加到body中，并稍微修改了我的css，对我来说效果很好：

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

- zoggole

Answer 5

我知道这是一个老问题，但现在你可以像文档中所述使用$.blockUI.defaults.css = {};

。

- Peter

---

所以呢，这仍然是JavaScript文件中的样式。这意味着设计师将不得不浏览代码库以查找插件配置。否则他们不应该被允许修改，这也是放弃此插件的非常重要的原因。 - Mister Smith

Answer 6

你可以在javascript之外定义一个样式来设置你的消息框，并且省略css块。对于你的情况，可能是这样的：

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

请查看this（v2）以获取更多信息。

- ruphus