Error en el fondo/superposición de un widget de diálogo jQuery con la opción modal

2 minutos de lectura

avatar de usuario
Igor Parra

estoy usando el widget de diálogo jQuery con el modal opción sobre un sitio de wordpress.
El fondo (superposición) no es todo gris, hay una franja blanca en el fondo.

$("#popup").dialog({
    dialogClass: "alert",
    width: crmpJs.setup.social_popup_custom_content_use ? crmpJs.setup.social_popup_setup_width : 640,
    height: crmpJs.setup.social_popup_custom_content_use ? crmpJs.setup.social_popup_setup_height : "auto",
    autoOpen: true,
    modal: true,
    resizable : false,
    draggable : false,
    zIndex: 10000,
    closeOnEscape: crmpJs.setup.social_popup_content_locker_use == "yes" ? false : true
});

ingrese la descripción de la imagen aquí

¿Alguna idea de la razón de este mal funcionamiento?

  • Esto todavía existe en la versión actual de jQueryUI (1.10.1) a partir de la redacción de este comentario. Es posible que desee transmitir una pregunta a su equipo sobre por qué lo escribieron de esta manera. Era lo mismo en la versión anterior también. Puede haber una razón legítima para hacerlo o puede depender de los estilos circundantes (especialmente en los elementos BODY y HTML).

    – Neil Monroe

    12/03/2013 a las 23:42

Es tu CSS. Cambie la repetición-x para simplemente repetir:

.ui-widget-overlay {
    background: url("../img/overlay-bg.png") repeat-x scroll 50% 50% #000000;
    opacity: 0.5;
}

a:

.ui-widget-overlay {
    background: url("../img/overlay-bg.png") repeat scroll 50% 50% #000000;
    opacity: 0.5;
}

  • Alternativamente, si no desea editar los archivos de tema en sí, simplemente escriba una regla que anule el valor de repetición con: fondo-repetir: repetir;

    – Neil Monroe

    12 de marzo de 2013 a las 23:43


He visto que esto se debe a que jQuery UI no reside en la base de URL actual, por lo que su CSS no se carga. Al menos en Safari y Firefox, el navegador no puede encontrar la imagen, por lo que muestra un cuadro de repetición x del tamaño predeterminado, lo que provoca la barra blanca.

Algunas opciones son:

  1. Mueva jQuery UI nuevamente dentro de la base de URL.
  2. Cambie el CSS para que apunte a la URL absoluta, aunque hay muchas URL en los archivos CSS de jQuery UI, y hace que la actualización sea una molestia.
  3. Mueva solo el directorio de imágenes a la base de URL.
  4. Anule el selector en su propio CSS para darle la URL correcta.
  5. Busque una segunda copia de jQuery que podría estar en otra ubicación como una inclusión para otra biblioteca, que podría estar anulando su jQuery principal.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad