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();
}
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.
Möglicherweise möchten Sie die jQuery-Dialogmethode ausprobieren:
$( ".selector" ).dialog( "moveToTop" );
Fügen Sie in Ihrem CSS hinzu:
.ui-dialog { z-index: 1000 !important ;}
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/
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.
Fügen Sie dies vor dem Aufruf des Dialogs hinzu
$( obiect ).css('zIndex',9999);
Und entferne
zIndex: 700,
aus dem Dialog
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;
}