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样式。

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

Answer 3

还可以在调用blockUI()时覆盖某些css参数。如下所示：

  $.blockUI({
    'message':$('#div-'+$(this).attr('id')),
    'css':{width:539,height:539,top:'80px',left:($(window).width()-539)/2+'px',border:0}
  });