2011-07-09 44 views
11

这里是http://jquery.malsup.com/block/样本页面上仅显示图像是与图像的覆盖消息的示例:jQuery的BlockUI插件方法blockUI如何没有任何backgorund

$.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新PARAM一个条件:

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

,比我可以宣布我的形象是这样的:

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

任何更多的想法?

+0

没有意义。如果第一个例子有效,那么没有理由为什么第二个例子不起作用。你应该发布一个实例。 – Sparky

+0

@ Sparky672它正在两种方式工作。每次都添加h2标签。查看问题更新 – Joper

+0

我仍然很难理解您的问题和要求。也许你可以发布一个实例。 – Sparky

回答

10

默认情况下你得到了:

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

0

您可以覆盖CSS的覆盖

$.blockUI.defaults.overlayCSS.opacity = 0; 

这里更多:http://jquery.malsup.com/block/#options

+0

如何覆盖BlockUI中的重叠不透明度...任何想法... – Kalyan

+0

$ .blockUI({overlayCSS.opacity = 5.0}); ... is is currect ... ?? Help ...? – Kalyan

+0

@Kalyan $ .blockUI({ overlayCSS:{ 的backgroundColor: '#C8E6FF', 不透明度:0, 光标: '等待' } }); – JenonD

1

你也可以在调用blockUI()时重写一些css参数。就像这样:

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

我想覆盖blobkUI中的overlayCSS ... – Kalyan

+0

HOw ???任何想法...?? – Kalyan

7

这一个完美的作品

$.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'} 
}); 
+0

thanx ...它帮助很多.. – Kalyan

+0

谢谢。完美的工作。 – Mainuddin

0

just hit this url : https://sites.google.com/site/atgcorner/Downhome/javascript/jqueryblockuipopupwithimage-1

在我的代码利尔实施

然后..

 
    

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)