jQuery BlockUI插件方法blockUI如何在没有任何backgorund的情况下显示图像

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插件(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 = {};

或者如果你想要排除背景和边界,那就去那个insteard吧:

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

基本上使用外部样式表,您可以指定所需的任何CSS样式.

Answer 2

这一个很完美

$.blockUI({ message: '<img src="your.gif" />' ,
css: { width: '4%', border:'0px solid #FFFFFF',cursor:'wait',backgroundColor:'#FFFFFF'},
  overlayCSS:  { backgroundColor: '#FFFFFF',opacity:0.0,cursor:'wait'} 
});