método jQuery BlockUI Plugin blockUI cómo mostrar la imagen simplemente sin ningún backgorund

Question

aquí está en la página de ejemplo http://jquery.malsup.com/block/ es un ejemplo de un mensaje de plantilla con una imagen:

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

pero quiero mostrar sólo una imagen, por lo que nos llevó a cabo la etiqueta h1:

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

pero todavía hay un color de fondo debajo de mi imagen. ¿Cómo puedo eliminarlo?

De acuerdo con el código fuente de jQuery BlockUI Plugin (v2) es envolver el mensaje en una etiqueta h2

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

lo que parece que no hay forma sin modificación del código fuente para pasar sólo una imagen etiqueta.

yo podría modificar el código fuente de la biblioteca de introducir un nuevo parámetro como image con una condición:

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

y de lo que podía declarar mi imagen como esta:

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

más ideas?

Answer 1

Por defecto que tienes que:

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

Así que si usted no quiere que ninguno de estos sólo hacer eso en su código:

$.blockUI.defaults.css = {}; 

O si desea excluir fondo y el borde sólo tiene que ir con esa insteard:

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

usando Básicamente estilo externa que se puede especificar cualquier estilo CSS que desea.

Answer 2

Puede anular el css para la superposición

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

Más aquí: http://jquery.malsup.com/block/#options

Answer 3

También puede anular algunos parámetros CSS al llamar a blockUI(). De esta manera:

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

Answer 4

Ésta funciona perfectamente

$.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 5

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

luego con una implementación de Litle en mi código ..

 
    

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

    } 

funciona bien (estoy Actualmente usa FF 31.0 & Chrome 36.0)