web-dev-qa-db-fra.com

jqueryui dialogue de positionnement

J'utilise l'interface utilisateur de JQuery et je souhaite positionner mon dialogue horizontalement au centre mais verticalement au-dessus du centre, par exemple par une quantité fixe de pixels ou par une distance relative du haut de la page. Y a-t-il un moyen facile de faire ceci? On dirait qu’il n’ya que quelques valeurs prédéfinies ou que je peux utiliser une position exacte, mais existe-t-il un moyen facile d’y parvenir? 

 $("#dialog-form").dialog({
                autoOpen: false,
                width: 630,
                position: 'center',
                modal: true,
                resizable: false,
                closeOnEscape: false

            });
jqueryhtmlcssjquery-uijquery-ui-dialog
23
Joe Cartano

Utilisez l’option position pour aligner le haut de la boîte de dialogue sur le haut de la fenêtre (plus un décalage en pixels ou en pourcentage).

Cela devrait centrer le dialogue horizontalement et le positionner à 150 pixels du haut.

$("#dialog-form").dialog({
    autoOpen: false,
    width: 630,
    position: { my: 'top', at: 'top+150' },
    modal: true,
    resizable: false,
    closeOnEscape: false
});

Les anciennes versions de jQuery UI utilisaient un tableau contenant une paire de coordonnées [x, y] en décalage pixel par rapport au coin supérieur gauche de la fenêtre (par exemple, [350,100]).

var dialogWidth = 630;
$("#dialog-form").dialog({
    // ...
    width: dialogWidth,
    position: [($(window).width() / 2) - (dialogWidth / 2), 150],
    // ...
});
74
mr.moses

Cela a fonctionné pour moi 

 position: { my: "center", at: "center", of: window },

Aussi, vous pouvez vérifier les positions de dialogue ici
Trouver une position

2
Dragon

je suis tombé sur cela en cherchant la même question, mais j'avais déjà ma réponse:

position: ['center', 'top+100']

ce sera centré horizontalement et à 100 pixels du haut

cela fonctionne aussi

position: ['center', 'center+100']

centre horizontalement et à 100 pixels du centre

1
Exlord

J'ai ajusté la réponse d'Exlord pour l'adapter.

position: ['center-7%', 'center-12%']

Cela ajuste horizontalement et verticalement

$(".popup").dialog({    
position: ['center-7%', 'center-12%'],
title: 'Updating',
    width: "auto",
}
});
0
Mikeys4u

Essaye ça:

    position: {
        my: 'top',
        at: 'top',
        of: $('#some-div')
    },
0
Ahmed

Si quelqu'un crée un lien qui ouvre une boîte de dialogue jQuery en raison du fait que class du lien dispose d'un gestionnaire d'événements click, vous pouvez remarquer qu'il peut sauter en haut de la page mais créer plus profondément la boîte de dialogue modale la page et vous devez y faire défiler.

Si quelqu'un essaie juste d'empêcher la boîte de dialogue jQuery de sauter au sommet, en voulant qu'elle reste près du lien sur lequel vous avez cliqué, il suffit de supprimer href. A failli devenir fou en essayant de résoudre ce problème. Apparemment, la spécification HTML5 comprend que href="" ou href="#" signifie un déplacement vers le haut.

0
DMadden51
position: { 
   my: 'top', 
   at: 'top+150' 
}

Travaillé pour moi.

0
Santosh Bt