jqueryui boîte de dialogue positionnement

Je suis à l'aide de JQuery UI et voudrais placer mon dialogue centrée horizontalement mais verticalement au-dessus du centre, peut-être par une quantité fixe de pixels ou un proche distance à partir du haut de la page. Est-il un moyen facile de faire cela? Il semble que il ya seulement un couple de valeurs prédéfinies ou je peux utiliser une position exacte, mais est-il un moyen facile d'accomplir cette?

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

            });

Avez-vous essayé ['center', 'top']?
Que fait la boîte de dialogue apparaissent dans le centre de l'horizontale, mais en haut de la page (en supposant que je n'ai pas fait une erreur). Je veux la position de la boîte de dialogue ci-dessus le centre un peu.

InformationsquelleAutor Joe Cartano | 2012-02-16

74

Utiliser le la position d'option pour aligner le haut de la boîte de dialogue avec le haut de la fenêtre (en plus d'un pixel ou en pourcentage de décalage).

Cela devrait centre de la boîte de dialogue à l'horizontale et la position de 150 pixels de 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 utilisé un tableau contenant un [x,y] paire de coordonnées en pixels de décalage à partir de la gauche, en haut à droite de la fenêtre d'affichage (par exemple, [350,100]).
```
var dialogWidth = 630;
$("#dialog-form").dialog({
    //...
    width: dialogWidth,
    position: [($(window).width() / 2) - (dialogWidth / 2), 150],
    //...
});
```
- Il convient de noter que la méthode de la baie a depuis été abandonnée. Utiliser un objet à la place.
- mis à jour pour utiliser la position de l'objet (pour les nouvelles versions de jQuery UI)
- Remarque, vous avez le contrôle de l'x,y deux objets. position: { ma: "centre de haut", à: "centre de haut", de: fenêtre },
InformationsquelleAutor Alpha Codemonkey
2

Cela a fonctionné pour moi
```
 position: { my: "center", at: "center", of: window },
```
Vous pouvez aussi vérifier dialogue postes ici

Trouver Une Position

InformationsquelleAutor Dragon
1

je suis tombé sur ce lors de la recherche pour la même question bu j'ai déjà eu ma réponse :
```
position: ['center', 'top+100']
```
cela va centrer horizontalement et 100 pixels de haut

cela fonctionne aussi
```
position: ['center', 'center+100']
```
centrer horizontalement et 100 pixel à partir de ci-dessous du centre de

InformationsquelleAutor Exlord
0

J'ai ajusté Exlord est la réponse adaptée.

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

Cette règle horizontalement et verticalement
```
$(".popup").dialog({    
position: ['center-7%', 'center-12%'],
title: 'Updating',
    width: "auto",
}
});
```
InformationsquelleAutor Mikeys4u

Essayez ceci:

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

InformationsquelleAutor Ahmed

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

A fonctionné pour moi.

InformationsquelleAutor Santosh Bt

0

Si quelqu'un est de créer un lien qui ouvre un dialogue jQuery en raison du lien de classe avoir un gestionnaire d'événements click, vous peut avis qu'il pourrait sauter vers le haut de la page créer une boîte de dialogue modale de plus profond en bas de la page et que vous avez à faire défiler jusqu'à elle.

Si quelqu'un est juste essayé d'arrêter le jQuery dialogue de sauter vers le haut, vouloir rester près le lien vous avez cliqué, il suffit de retirer href. Est presque devenu fou en essayant de résoudre ce problème. La spécification HTML5 apparemment comprend href="" ou href="#" à dire déplacer vers le haut.

InformationsquelleAutor DMadden51
-5

d'appliquer le style css dans votre #de dialogue-l'utilisation de la forme % de l'échantillon

si la largeur = 1000

mettre

gauche:50%
margin-left:-500px;

à faire qu'il soit centré. ou vous pouvez utiliser l'iframe.

InformationsquelleAutor Bert

Vous devez vous connecter pour publier un commentaire.