jQuery BlockUI插件方法blockUI如何只显示没有背景的图像 [英] jQuery BlockUI Plugin method blockUI how to display just image without any background

问题描述

此处在示例页面上 http://jquery.malsup.com/block/是带有图片的重叠式广告的示例:

Here is on the sample page http://jquery.malsup.com/block/ is an example of an overlay message with an image:

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

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

But I want to display just an image, so I took out the h1 tag:

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

但是我的图像下面仍然有背景色.如何删除它?

But there is still a background color under my image. How can I remove it?

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

According with source code of jQuery BlockUI Plugin (v2) it is wrapping the message in an h2 tag

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

因此，看起来好像没有对源代码进行修改就无法仅传递图像标签的方法.

so it looks like there is no way without modification of the source code to pass just an image tag.

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

I might modify the library source code to introduce a new param like image with a condition:

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

然后我可以这样声明我的图片:

and than I could declare my image like this:

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

还有其他想法吗?

推荐答案

默认情况下，您得到了:

By default you got that:

    // 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'
    },

因此，如果您不希望其中任何一个，只需在您的代码中执行即可:

So if you don't want any of these just do that in your code:

$.blockUI.defaults.css = {};

或者，如果您想排除背景和边框，请使用该工具:

Or if you want to exclude background and border just go with that insteard:

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

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

Basically using that external stylesheet you may specify any css style you want.

这篇关于jQuery BlockUI插件方法blockUI如何只显示没有背景的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！