Question

我在多个地方使用blockUI，它们都具有相同的属性，所以我继续在我使用的所有地方重复相同的css值。有没有办法把它放入CSS文件。

目前我使用：

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

我可以使用：

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

感谢

Answer 1

我在修改我的blockUI插件副本的过程中添加了这个功能，发现blockMsgClass已经有了一个配置选项，将此设置为你的css类将你的类添加到块中。

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

有一点需要注意的是，插件代码使用内联css，因此您需要将字符标记为！important，例如text-align，color，border，background-color和cursor：wait。

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

Answer 2

根据documentation - 你不能。

但是你这样做：

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

P.S。请务必不要在编写代码时给出任何样式。

并更新为以下内容：

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

            } 
        });

Answer 3

对于动态类添加第一个答案有效，但发生了一些闪烁，因为该类添加得太晚了。所以我在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;
}

Answer 4

您可以在javascript之外为消息框定义样式，并省略css块。在你的情况下，它可能是：

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

请查看this（v2）了解更多信息。

Answer 5

我知道这是一个老问题，但现在您可以使用documentation

中所述的$.blockUI.defaults.css = {};

Answer 6

这可能是一个古老的问题，但这里是任何人都需要它的答案 http://malsup.com/jquery/block/stylesheet.html 基本上你将通过这条线禁用默认的CSS $ .blockUI.defaults.css = {};

然后将css样式添加到单独的文件中。

对于blockUI使用外部CSS而不是内联CSS

6 个答案: