jQuery BlockUI 插件方法 blockUI 如何在没有任何背景的情况下仅显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6636157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery BlockUI Plugin method blockUI how to display just image without any background
提问by Joper
Here is on the sample page http://jquery.malsup.com/block/is an example of an overlay message with an image:
这是示例页面http://jquery.malsup.com/block/上的一个带有图像的覆盖消息示例：
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
But I want to display just an image, so I took out the h1 tag:
但是我只想显示一个图像，所以我取出了 h1 标签：
$.blockUI({ message: '<img src="busy.gif" />' });
$.blockUI({ message: '<img src="busy.gif" />' });
But there is still a background color under my image. How can I remove it?
但是我的图像下仍然有背景颜色。我怎样才能删除它？
According with source code of jQuery BlockUI Plugin (v2) it is wrapping the message in an h2 tag
根据 jQuery BlockUI Plugin (v2) 的源代码，它将消息包装在 h2 标签中
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.
所以看起来没有修改源代码就无法只传递图像标签。
I might modify the library source code to introduce a new param like imagewith a condition:
我可能会修改库源代码以引入一个新的参数，如image条件：
if (image) $m.append(image);
and than I could declare my image like this:
然后我可以像这样声明我的形象：
$.blockUI({ image: '<img src="busy.gif" />' });
Any more ideas?
还有更多想法吗？
采纳答案by kuncevic.dev
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'
};
Basically using that external stylesheet you may specify any css style you want.
基本上使用该外部样式表，您可以指定您想要的任何 css 样式。
回答by user2675617
This one works perfectly
这个完美地工作
$.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'}
});
回答by Gardner
You can also override some css params when calling blockUI(). Like this:
您还可以在调用 blockUI() 时覆盖一些 css 参数。像这样：
$.blockUI({
'message':$('#div-'+$(this).attr('id')),
'css':{width:539,height:539,top:'80px',left:($(window).width()-539)/2+'px',border:0}
});
回答by Mrchief
You can override the css for overlay
您可以覆盖覆盖的 css
$.blockUI.defaults.overlayCSS.opacity = 0;
More here: http://jquery.malsup.com/block/#options
回答by user3916749
只需点击这个网址：https://sites.google.com/site/atgcorner/Downhome/javascript/jqueryblockuipopupwithimage-1
then with a litle implementation in my code..
然后在我的代码中有一点实现..
var spinnerImg = new Image();
spinnerImg.src = "${spinnerImage}";
function loadpage() {
$.ajax({ url: 'wait.jsp', cache: false });
}
function testload(){
var msg = "";
$.blockUI({
message: $(' Wait a moment..'),
css: {
border: 'none',
padding: '15px',
backgroundColor: '#fff',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#000'
} });
loadpage();
setTimeout($.unblockUI, 6000);
}
IT Works fine (i'm currently using FF 31.0 & Chrome 36.0)
IT 工作正常（我目前使用的是 FF 31.0 和 Chrome 36.0）
