JQuery BlockUI Plugin method blockUI как отображать только изображение без какого-либо backgorund

Ниже приведен пример страницы 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 Plugin (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" />' });

Любые идеи?

Ответ 1

По умолчанию вы получили следующее:

    // 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.

Ответ 2

Это отлично работает

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

Ответ 3

Вы также можете переопределить некоторые параметры css при вызове blockUI(). Вот так:

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

Ответ 4

Вы можете переопределить css для наложения

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

Подробнее здесь: http://jquery.malsup.com/block/#options

Ответ 5

просто нажмите этот URL: https://sites.google.com/site/atgcorner/Downhome/javascript/jqueryblockuipopupwithimage-1

затем с реализацией 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);

    }

IT Работает нормально (в настоящее время я использую FF 31.0 и Chrome 36.0)