以下是示例页面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" />' });
还有什么想法吗?
默认情况下你得到了:
// 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样式。
这一个很完美
$.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'}
});
调用blockUI()时,您还可以覆盖一些css参数。像这样:
$.blockUI({
'message':$('#div-'+$(this).attr('id')),
'css':{width:539,height:539,top:'80px',left:($(window).width()-539)/2+'px',border:0}
});
然后在我的代码中使用litle实现..
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); }
它工作正常(我目前正在使用FF 31.0和Chrome 36.0)