web-dev-qa-db-fra.com

jQuery UI 1.10: dialogue et option zIndex

Je dois faire un dialogue pour apparaître quand une image sur clic. Le problème, c’est que j’ai un indice z vraiment grand (500 par exemple) et que la boîte de dialogue ui se trouve à l’arrière de ces éléments. 

Voici la page, vous devez vous connecter, utilisateur: "raducup" et passer: "1". Un autre problème est que lorsque je clique sur fermer dans la boîte de dialogue, l'objet disparaît.

C’est la fonction que j’appelle lorsqu’une image est cliquée:

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

Vous ne le dites pas, mais vous utilisez jQuery UI 1.10.

Dans jQuery UI 1.10, l'option zIndex est supprimée:

Option zIndex supprimée

Semblable à l'option de pile, l'option zIndex n'est pas nécessaire avec un bonne mise en œuvre d'empilement. L'indice z est défini dans CSS et l'empilement est maintenant contrôlé en s'assurant que le dialogue ciblé est le dernier élément "stacking" dans son parent.

vous devez utiliser des CSS purs pour définir le dialogue "sur le dessus":

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

vous avez besoin de la clé !important pour remplacer le style par défaut de l'élément; cela affecte toutes vos boîtes de dialogue si vous devez le définir uniquement pour une boîte de dialogue, utilisez l'option dialogClass et stylisez-la.

Si vous avez besoin d’une boîte de dialogue modale, définissez l’option modal: true dans la section docs :

Si défini sur true, la boîte de dialogue aura un comportement modal; autres articles sur la page sera désactivée, c’est-à-dire qu’on ne pourra pas interagir avec elle. Modal Les boîtes de dialogue créent une superposition sous la boîte de dialogue, mais au-dessus d'une autre page éléments.

Pour ce faire, vous devez définir la superposition modale avec un indice z supérieur. Pour ce faire, utilisez:

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

pour cet élément aussi.

100
Irvin Dominin

Vous voudrez peut-être essayer la méthode de dialogue jQuery: 

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

référence: http://api.jqueryui.com/dialog/#method-moveToTop

8
Alain Gauthier

Ajoutez dans votre CSS:

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

Il y a plusieurs suggestions ici, mais pour autant que je sache, l'interface utilisateur de jQuery a brisé le contrôle du dialogue à l'heure actuelle. 

Je dis cela parce que j'inclus un dialogue sur ma page, qui est semi-transparent et que la division de suppression modale se cache derrière certains autres éléments. Cela ne peut pas être juste!

À la fin de certains articles, j’ai développé cette solution globale, en tant qu’extension du widget de dialogue. Cela fonctionne pour moi, mais je ne suis pas sûr de ce que cela ferait si j'ouvrais un dialogue à partir d'un dialogue.

Fondamentalement, il recherche l'index zIndex de tout le reste de la page et déplace le calque .ui-widget-overlay sur un niveau supérieur, et le dialogue lui-même sur un niveau supérieur.

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

Merci à ce qui suit, car c’est là que j’ai eu l’info de comment faire ceci: https://stackoverflow.com/a/20942857

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

1
Morvael

moveToTop est la bonne façon.

z-Index n'est pas correct. Cela fonctionne initialement, mais plusieurs dialogues continueront à flotter sous celui que vous avez modifié avec z-index. Pas bien.

0
Carlos Saenz

Ajouter ceci avant d'appeler le dialogue

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

Et enlever

 zIndex: 700,

de dialogue

0
Rohan Kumar

Pour prendre en sandwich mon élément entre l'écran modal et une boîte de dialogue, je dois lever mon élément au-dessus de l'écran modal, puis la boîte de dialogue située au-dessus de mon élément.

J'ai eu un petit succès en procédant comme suit après avoir créé le dialogue sur l'élément $dlg.

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

Étant donné que chaque boîte de dialogue a un z-index de départ différent (leur taille augmente progressivement), je transforme adjustment en chaîne avec une valeur boost, comme ceci:

const adjustment = "+=99";

Cependant, jQuery ne fait qu'augmenter la valeur zIndex sur l'écran modal. Ainsi, dans la deuxième boîte de dialogue, le sandwich ne fonctionne plus. J'ai abandonné ui-dialog "modal", je l'ai "faux" et je viens de créer mon propre modal. Il imite jQueryUI exactement. C'est ici:

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