wake-up-neo.com

jQuery UI 1.10: Dialog und zIndex-Option

Ich muss einen Dialog erstellen, der angezeigt wird, wenn ein Bild angeklickt wird. Das Problem ist, dass ich dort einen wirklich großen Z-Index habe (zum Beispiel 500) und der UI-Dialog auf der Rückseite dieser Elemente ist. 

Hier ist die Seite, auf der Sie sich anmelden müssen, Benutzer: "raducup" und "1" übergeben. Ein anderes Problem ist, dass das Objekt verschwindet, wenn ich im Dialogfeld auf Schließen klicke.

Diese Funktion rufe ich an, wenn ein Bild angeklickt wird:

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();
}
javascriptjqueryhtmlcssjquery-ui
44
raducup

Sie wissen es nicht, aber Sie verwenden jQuery UI 1.10.

In jQuery UI 1.10 wird die Option zIndex entfernt:

Die zIndex-Option wurde entfernt

Ähnlich wie bei der Option stack ist die Option zIndex mit einer .__ nicht erforderlich. ordnungsgemäße Stacking-Implementierung. Der Z-Index ist in CSS und .__ definiert. Das Stapeln wird jetzt gesteuert, indem sichergestellt wird, dass der fokussierte Dialog der letzte ist "Stacking" -Element im übergeordneten Element.

sie müssen pure css verwenden, um den Dialog "oben" einzustellen:

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

sie benötigen den Schlüssel !important, um den Standardstil des Elements zu überschreiben. Dies wirkt sich auf alle Ihre Dialoge aus, wenn Sie es nur für ein Dialogfeld festlegen müssen, verwenden Sie die Option dialogClass und formatieren Sie sie.

Wenn Sie einen modalen Dialog benötigen, stellen Sie die Option modal: true ein, siehe docs :

Wenn der Wert auf true gesetzt ist, weist das Dialogfeld ein modales Verhalten auf. andere Artikel auf die Seite wird deaktiviert, d. h. kann nicht mit interagiert werden. Modal Dialoge erstellen eine Überlagerung unter dem Dialog, aber über einer anderen Seite Elemente.

Sie müssen das modale Overlay mit einem höheren Z-Index festlegen, um dies zu verwenden:

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

auch für dieses Element.

100
Irvin Dominin

Möglicherweise möchten Sie die jQuery-Dialogmethode ausprobieren: 

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

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

8
Alain Gauthier

Fügen Sie in Ihrem CSS hinzu:

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

Hier gibt es mehrere Vorschläge, aber soweit ich sehen kann, haben die jQuery-Benutzeroberflächen die Dialogsteuerung zur Zeit gebrochen. 

Ich sage das, weil ich einen Dialog auf meiner Seite einfüge, dessen halbtransparentes und modales Austast-Div hinter einigen anderen Elementen steht. Das kann nicht richtig sein!

Auf der Grundlage einiger anderer Posts entwickelte ich diese globale Lösung als Erweiterung des Dialog-Widgets. Es funktioniert für mich, aber ich bin nicht sicher, was es tun würde, wenn ich einen Dialog aus einem Dialog heraus öffnen würde.

Grundsätzlich sucht es nach dem zIndex von allem anderen auf der Seite und verschiebt das .ui-Widget-Overlay um einen höheren Wert und der Dialog selbst um einen höheren Wert.

$.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();
    }
});

Vielen Dank an das Folgende, da ich die Informationen dazu bekommen habe: https://stackoverflow.com/a/20942857

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

1
Morvael

moveToTop ist der richtige Weg.

z-Index ist nicht korrekt. Es funktioniert anfangs, aber mehrere Dialoge werden weiterhin unter dem Dialog angezeigt, den Sie mit z-index geändert haben. Nicht gut.

0
Carlos Saenz

Fügen Sie dies vor dem Aufruf des Dialogs hinzu

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

Und entferne

 zIndex: 700,

aus dem Dialog

0
Rohan Kumar

Um ein my-Element zwischen dem modalen Bildschirm und einem Dialog einzufügen, muss ich mein Element über den modalen Bildschirm heben und dann den Dialog über mein Element heben.

Ich hatte einen kleinen Erfolg, indem ich nach dem Erstellen des Dialogs auf Element $dlg Folgendes tat:.

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

Da jeder Dialog einen anderen Start z-index hat (sie werden schrittweise größer), mache ich adjustment eine Zeichenfolge mit einem Boost-Wert wie folgt:

const adjustment = "+=99";

JQuery erhöht jedoch ständig den zIndex-Wert auf dem modalen Bildschirm, sodass das Sandwich im zweiten Dialog nicht mehr funktioniert. Ich habe auf Ui-Dialog "Modal" verzichtet, "False" gemacht und gerade mein eigenes Modal erstellt. Es imitiert jQueryUI genau. Hier ist es:

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;
}
0
IAM_AL_X