overlay - example - jQuery: establecer el color de la superposición del diálogo modal

jquery modal

Question

Me gustaría abrir un diálogo modal utilizando jquery ui donde la superposición es completamente negra. Sé que puedo establecer esto en el tema, pero no quiero que todos los diálogos tengan una superposición negra. Solo uno de ellos.

¿Hay alguna forma de configurar el color de fondo (superposición) de un cuadro de diálogo por diálogo? Tal vez cuando se crea?

TIA

Answer 1

Cambiar el fondo:

$(".ui-widget-overlay").css({background: "#000", opacity: 0.9});

Restaurar el fondo a los valores de CSS:

$(".ui-widget-overlay").css({background: '''', opacity: ''''});

Answer 2

El elemento de superposición es un hermano inmediato del widget de diálogo y expone la clase de ui-widget-overlay , por lo que puede igualarlo y modificar el color de fondo en una base por diálogo:

$("#yourDialog").dialog("widget")
                .next(".ui-widget-overlay")
                .css("background", "#f00ba2");

Puedes ver los resultados en este violín .

Answer 3

El fondo del cuadro de diálogo JQuery es un div que tiene la clase "ui-widget-overlay". Los estilos de clave que desea ajustar son "opacidad", "filtro" y "color de fondo" ("opacidad" y "filtro" son dos formas diferentes de configurar la opacidad para los diferentes navegadores). Puede ajustar la definición de clase o Haga lo siguiente en la definición del diálogo:

$("div#MyDialog").dialog({
    title: "My Dialog Title",
    open: function (event, ui) {
        $(".ui-widget-overlay").css({
            opacity: 1.0,
            filter: "Alpha(Opacity=100)",
            backgroundColor: "black"
        });
    },
    modal: true
});

Answer 4

La respuesta de Frederic fue muy cercana, pero me dejó con un problema: tenía más de un cuadro de diálogo en esa página, y después de cambiar la superposición de un cuadro de diálogo, todos cambiaron hasta que la página se volvió a cargar. Sin embargo, me dio una idea;

Primero almacené los valores predeterminados en variables (alcance de página) y luego configuré mi estilo personalizado.

var overlay = $(".ui-widget-overlay");
baseBackground = overlay.css("background");
baseOpacity = overlay.css("opacity");
overlay.css("background", "#000").css("opacity", "1");

Luego, cuando se cierra el diálogo, restauré esos valores.

$(".ui-widget-overlay").css("background", baseBackground).css("opacity", baseOpacity);

La razón principal para almacenarlas en variables (en lugar de restablecerlas a valores explícitos) es su facilidad de mantenimiento. De esta manera, incluso si el sitio.css cambia, funcionará.

¡Gracias por tu ayuda!

Answer 5

Puede utilizar los eventos de abrir y cerrar del diálogo ui.

$("#your-dialog").dialog(
{
    autoOpen: false, 
    modal: true, 
    open: function() {
        $(''.ui-widget-overlay'').addClass(''custom-overlay'');
    }          
});

Y agrega el estilo requerido en el CSS. Ejemplo:

.ui-widget-overlay.custom-overlay
{
    background-color: black;
    background-image: none;
    opacity: 0.9;
    z-index: 1040;    
}