javascript - style - z index negative

jQuery UI 1.10: opción de diálogo y zIndex

Question

Tengo que hacer un diálogo para disparar cuando una imagen haga clic. El problema es que tengo un índice z realmente grande allí (500 por ejemplo) y el diálogo ui está en la parte posterior de esos elementos.

Aquí está la página, debes iniciar sesión, usuario: "raducup" y pasar: "1". Otro problema es que cuando hago clic en Cerrar en el diálogo, el objeto desaparece.

Esta es la función que llamo cuando se hace clic en una imagen:

function openItem(obiect){
$( obiect ).css(''zIndex'',9999);
$( obiect ).dialog({
dialogClass: "no-close",
modal: true,
draggable: true,
overlay: "background-color: red; opacity: 0.5",
buttons: [
{
text: "OK",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
reparaZindex();
}

Answer 1

Agregue esto antes de llamar al diálogo

$( obiect ).css(''zIndex'',9999);

Y eliminar

 zIndex: 700,

del diálogo

Answer 2

Agregue la propiedad zIndex al objeto de diálogo:

$(elm).dialog(
zIndex: 10000
);

Answer 3

Agregue su CSS:

 .ui-dialog { z-index: 1000 !important ;}

Answer 4

Es posible que desee probar el método de diálogo jQuery:

$( ".selector" ).dialog( "moveToTop" );

referencia: http://api.jqueryui.com/dialog/#method-moveToTop

Answer 5

Hay varias sugerencias aquí, pero por lo que puedo ver, los chicos de jQuery UI han roto el control del diálogo en este momento.

Digo esto porque incluyo un diálogo en mi página, y es semi transparente y la división modal de seguridad está detrás de algunos otros elementos. Eso no puede ser correcto!

Al final, basado en algunos otros mensajes, desarrollé esta solución global, como una extensión del widget de diálogo. Funciona para mí, pero no estoy seguro de qué haría si abriera un diálogo desde dentro de un diálogo.

Básicamente busca el zIndex de todo lo demás en la página y mueve el .ui-widget-overlay para que sea uno más alto, y el diálogo mismo sea uno más alto que eso.

$.widget("ui.dialog", $.ui.dialog,
{
open: function ()
{
var $dialog = $(this.element[0]);
var maxZ = 0;
$(''*'').each(function ()
{
var thisZ = $(this).css(''zIndex'');
thisZ = (thisZ === ''auto'' ? (Number(maxZ) + 1) : thisZ);
if (thisZ > maxZ) maxZ = thisZ;
});
$(".ui-widget-overlay").css("zIndex", (maxZ + 1));
$dialog.parent().css("zIndex", (maxZ + 2));
return this._super();
}
});

Gracias a lo siguiente, ya que aquí es donde obtuve la información de cómo hacer esto: https://.com/a/20942857

http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

Answer 6

No lo dice, pero está usando jQuery UI 1.10.

En jQuery UI 1.10 se zIndex opción zIndex :

Se eliminó la opción zIndex

De forma similar a la opción de pila, la opción zIndex es innecesaria con una implementación de apilamiento adecuada. El índice z se define en CSS y el apilamiento ahora se controla asegurando que el diálogo enfocado sea el último elemento de "apilamiento" en su elemento primario.

tienes que usar pure css para configurar el diálogo "en la parte superior":

.ui-dialog { z-index: 1000 !important ;}

necesita la clave !important para anular el estilo predeterminado del elemento; esto afecta a todos sus cuadros de diálogo si necesita configurarlo solo para un diálogo use la opción dialogClass y dialogClass .

Si necesita un diálogo modal, configure la opción modal: true , vea los docs :

Si se establece en verdadero, el diálogo tendrá un comportamiento modal; otros elementos en la página se desactivarán, es decir, no se podrán interactuar. Los diálogos modales crean una superposición debajo del diálogo pero encima de otros elementos de la página.

Necesita configurar la superposición modal con un índice z más alto para hacerlo, use:

.ui-front { z-index: 1000 !important; }

para este elemento también

Answer 7

Para emparejar un elemento mi entre la pantalla modal y un cuadro de diálogo, necesito levantar mi elemento sobre la pantalla modal, y luego levantar el cuadro de diálogo sobre mi elemento.

Tuve un pequeño éxito al hacer lo siguiente después de crear el diálogo en el elemento $dlg .

$dlg.closest(''.ui-dialog'').css(''zIndex'',adjustment);

Como cada diálogo tiene un z-index inicial diferente (cada vez son más grandes), configuro una cadena con un valor de impulso, como este:

const adjustment = "+=99";

Sin embargo, jQuery sigue aumentando el valor de zIndex en la pantalla modal, por lo que en el segundo diálogo, el sándwich ya no funcionaba. Me di por vencido en ui-dialog "modal", lo hice "falso", y acabo de crear mi propio modal. Imita jQueryUI exactamente. Aquí está:

CoverAll = {};
CoverAll.modalDiv = null;
CoverAll.modalCloak = function(zIndex) {
var div = CoverAll.modalDiv;
if(!CoverAll.modalDiv) {
div = CoverAll.modalDiv = document.createElement(''div'');
div.style.background = ''#aaaaaa'';
div.style.opacity = ''0.3'';
div.style.position = ''fixed'';
div.style.top = ''0'';
div.style.left = ''0'';
div.style.width = ''100%'';
div.style.height = ''100%'';
}
if(!div.parentElement) {
document.body.appendChild(div);
}
if(zIndex == null)
zIndex = 100;
div.style.zIndex = zIndex;
return div;
}
CoverAll.modalUncloak = function() {
var div = CoverAll.modalDiv;
if(div && div.parentElement) {
document.body.removeChild(div);
}
return div;
}

Answer 8

moveToTop es la forma correcta.

z-Index no es correcto. Funciona inicialmente, pero varios diálogos continuarán flotando debajo del que modificó con z-index. No es bueno.