Superposition de la boîte de dialogue jQuery UI

Question

J'ai utilisé différentes boîtes de dialogue jQuery. Pour certaines boîtes de dialogue, je veux un fond transparent. Si je change le CSS background dans la classe .ui-widget-overlay alors il s'appliquera à toutes les boîtes de dialogue.

Comment définir différentes couleurs d'arrière-plan pour différentes boîtes de dialogue?

Answer 1

Il vous suffit de créer un style comme celui-ci et d'utiliser l'option dialogClass dans les boîtes de dialogue sur lesquelles vous souhaitez créer un arrière-plan transparent. Bien sûr, vous pouvez faire plusieurs styles et passer tout ce que vous voulez

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

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

Vérifiez site de démonstration: http://jsbin.com/ifoja (jquery de base, jquery ui, jquery ui css + classe CSS personnalisée transparent)

Answer 2

j'ai écrit le code ci-dessous mais en prenant toujours l'arrière-plan de la classe .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

Peut-être que si vous définissez le mot-clé importante:

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

Answer 4

Dans votre appel de dialogue, définissez simplement modal: false pour les boîtes de dialogue que vous voulez transparentes.

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

Answer 5

Il n'y a qu'une seule superposition pour tous les widgets jQuery. Nous vous devons changer l'opacité est à la demande:

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

Ma solution est similaire à @RonnySherer, mais il ne semble pas travailler dans cruddy vieux IE7 avec plusieurs boîtes de dialogue jQuery UI. Ainsi, au lieu de définir directement l'opacité de l'élément de superposition, j'ai simplement ajouté/supprimé une classe CSS qui fonctionnait dans IE7 en plus des navigateurs modernes.

CSS Classe:

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