jQuery UI диалог наложения

Question

Я использовал разные диалоги jQuery. Для некоторых диалогов я хочу прозрачный фон. Если я изменил CSS background в классе .ui-widget-overlay, он применим ко всем диалоговым окнам.

Как установить различные цвета фона для разных диалогов?

Answer 1

Просто создайте стиль, подобный приведенному ниже, и воспользуйтесь опцией dialogClass в этих диалогах, в которых вы хотите иметь прозрачный фон. Конечно, вы можете сделать несколько стилей и передать все, что вы хотите

<style type="text/css" media="screen"> 
    .transparent { background:transparent } 
</style> 

//make dialog with transparent background 
$("#dialog").dialog({dialogClass:'transparent'}); 
//make default dialog 
$("#dialog2").dialog(); 

Проверьте демонстрационный сайт: http://jsbin.com/ifoja (основной JQuery, JQuery UI, JQuery щ CSS + прозрачный пользовательский класс CSS)

Answer 2

Я написал следующий код но она по-прежнему принимая фон класса .ui-widget-overlay

$("#dialog_empty").dialog({  
    dialogClass:'transparent',      
    resizable: false, 
    draggable: false, 
    modal: true,     
    height: 0, 
    width: 0, 
    autoOpen: false, 
    overlay: { 
     opacity: 0 
    } 
}); 
$('#dialog_empty').dialog('open'); 
$('#dialog_empty').css('display',''); 

Answer 3

Может быть, если вы установите важное ключевое слово:

<style type="text/css" media="screen"> 
    .transparent { background:transparent !important; } 
</style> 

Answer 4

В диалоговом вызове просто установите modal: false для диалогов, которые вы хотите прозрачно.

$("#dialog-modal").dialog({ 
      height: 140, 
      modal: false 
     }); 

Answer 5

На всех виджетах jQuery имеется только один оверлей. Этого мы должны изменить его непрозрачность по запросу:

var overlayOpacityNormal = 0.3, overlayOpacitySpecial = 0; 
$('#idOfDlg').dialog({ 
    modal: true, 
    open: function() 
    { 
     overlayOpacityNormal = $('.ui-widget-overlay').css('opacity'); 
     $('.ui-widget-overlay').css('opacity', overlayOpacitySpecial); 
    }, 
    beforeClose: function() 
    { 
     $('.ui-widget-overlay').css('opacity', overlayOpacityNormal); 
    } 
}); 

Answer 6

Мое решение аналогично @RonnySherer, но это не похоже на работу в Cruddy старой версии IE7 с несколькими диалогами JQuery UI. Поэтому вместо того, чтобы прямо устанавливать непрозрачность элемента overlay, я просто добавил/удалил класс CSS, который работал в IE7 в дополнение к современным браузерам.

CSS Класс:

div.modalOverlaySolid 
{ 
    opacity: 1 !important; 
    filter: alpha(opacity=100) !important; 
} 

Javascript:

$(div#divModalDialog).dialog({ 
    modal: true, 
    open: function() { 
     $(this).closest(".ui-dialog").next(".ui-widget-overlay").addClass("modalOverlayPrivate"); 
    }, 
    beforeClose: function() { 
     $(this).closest(".ui-dialog").next(".ui-widget-overlay").removeClass("modalOverlayPrivate"); 
    } 
});