superposición de cuadro de diálogo de IU de jQuery

Question

He utilizado diferentes cuadros de diálogo de jQuery. Para algunos cuadros de diálogo, quiero un fondo transparente. Si cambio el CSS background en la clase .ui-widget-overlay, se aplicará a todos los cuadros de diálogo.

¿Cómo establecer diferentes colores de fondo para diferentes cuadros de diálogo?

Answer 1

Simplemente cree un estilo como el siguiente y utilice la opción dialogClass en los cuadros de diálogo que desea que tengan un fondo transparente. Por supuesto se pueden hacer varios estilos y pase lo que quiera

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

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

Comprobar sitio de demostración: http://jsbin.com/ifoja (jQuery básica, la interfaz de usuario jQuery, CSS jQuery UI + Clase transparente CSS personalizado)

Answer 2

que escribió el código de abajo pero sigue teniendo el fondo de la clase .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

Tal vez si se establece la importancia de palabras clave:

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

Answer 4

En su llamada de diálogo, simplemente configure modal: false para los diálogos que desee transparentes.

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

Answer 5

Solo hay una superposición para todos los widgets de jQuery. Para ello tenemos que cambiar la opacidad de la demanda:

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

Mi solución es similar a @RonnySherer, pero no parece que trabajar en IE7 sucia de edad con múltiples cuadros de diálogo jQuery UI. Entonces, en lugar de establecer directamente la opacidad del elemento de superposición, simplemente agregué/eliminé una clase de CSS que funcionaba en IE7 además de los navegadores modernos. Clase

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