jQuery BlockUI 插件方法 blockUI 如何只显示图像而不显示任何背景

Question

这是示例页面http://jquery.malsup.com/block/是带有图像的覆盖消息的示例:

$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });

但我只想显示一个图像，所以我取出了 h1 标签:

$.blockUI({ message: '<img src="busy.gif" />' });

但是我的图像下仍然有背景颜色。我怎样才能删除它？

根据 jQuery BlockUI Plugin (v2) 的源代码，它将消息包装在 h2 标签中

if (title) $m.append('<h1>'+title+'</h1>');
if (message) $m.append('<h2>'+message+'</h2>');

所以看起来如果不修改源代码就无法仅传递图像标签。

我可能会修改库源代码以引入新参数，例如 image有条件:

if (image) $m.append(image);

然后我可以这样声明我的形象:

$.blockUI({ image: '<img src="busy.gif" />' });

还有更多想法吗？

Answer 1

默认情况下，您会得到:

    // styles for the message when blocking; if you wish to disable
    // these and use an external stylesheet then do this in your code:
    // $.blockUI.defaults.css = {};
    css: {
        padding:    0,
        margin:     0,
        width:      '30%',
        top:        '40%',
        left:       '35%',
        textAlign:  'center',
        color:      '#000',
        border:     '3px solid #aaa',
        backgroundColor:'#fff',
        cursor:     'wait'
    },

因此，如果您不想要其中任何一个，只需在代码中执行此操作即可:

$.blockUI.defaults.css = {};

或者，如果您想排除背景和边框，只需使用它即可:

$.blockUI.defaults.css = { 
            padding: 0,
            margin: 0,
            width: '30%',
            top: '40%',
            left: '35%',
            textAlign: 'center',
            cursor: 'wait'
        };

基本上，使用该外部样式表，您可以指定您想要的任何 css 样式。