web-dev-qa-db-fra.com

Comment positionner mon dialogue jQuery sur le centre?

J'ai essayé de suivre le code, mais il ne positionne que les dialogues dans le coin supérieur gauche du centre, ce qui permet d'aligner l'élément à droite. Comment centrer le dialogue sur le centre réel, qui compte la largeur des éléments, de sorte que la ligne centrale le coupe à 50%, 50% et demi?

$('.selector').dialog({ position: 'center' });

http://docs.jquery.com/UI/Dialog#option-position

jqueryjquery-uidialogjquery-dialog
63
newbie

Je suis presque sûr que vous ne devriez pas avoir besoin de définir une position:

$("#dialog").dialog();

devrait centrer par défaut .

J’ai jeté un coup d’œil à l’article et j’ai également vérifié ce qui était écrit sur le site officiel de jquery-ui sur le positionnement d’un dialogue : et dans lequel étaient discutés 2 états: initialise et après initialisation.

Exemples de code - (extrait de l'interface utilisateur de jQuery 2009-12-03)

Initialiser un dialogue avec l'option de position spécifiée.

$('.selector').dialog({ position: 'top' });

Récupère ou définit l'option de position, après init.

//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');

Je pense que si vous supprimiez l'attribut position, vous le trouverez au centre, sinon essayez la deuxième option de définition, dans laquelle vous définissez 3 éléments de "option" "position" et "centre".

47
Luke Duddridge

La dernière interface utilisateur de jQuery a un composant position:

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

Doc: http://jqueryui.com/demos/position/
Obtenez: http://jqueryui.com/download

65
WhyNotHugo

Parce que la boîte de dialogue a besoin d’une position, vous devez inclure la position js

<script src="jquery.ui.position.js"></script>
18
projo

Donc, si quelqu'un clique sur cette page comme je l'ai fait, ou si j'oublie dans 15 minutes, j'utilise la version 1.10.1 et jquery 1.9.1 de dialogues avec jQuery avec ie8 dans un iframe (blah) ça ne marche pas, c'est à dire.

position: {
 my: "center bottom",
 at: "center top",
 of: $("#submitbutton"),
 within: $(".content")
}

Merci à @ vm370 de m'avoir orienté dans la bonne direction.

11
Mike
open: function () {

    var win = $(window);

    $(this).parent().css({
        position: 'absolute',
        left: (win.width() - $(this).parent().outerWidth()) / 2,
        top: (win.height() - $(this).parent().outerHeight()) / 2
    });
}
9
Jean Paul A.K.A el_vete

Pour fixer la position centrale, j'utilise:

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}
7
Eduardo Cuomo

Essaye ça....

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});
6
Rikin Patel

J'obtiens les meilleurs résultats pour placer la boîte de dialogue jQuery au centre de la fenêtre du navigateur avec:

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

Il existe probablement un moyen plus précis de le positionner avec l'option "using" comme décrit dans la documentation de http://api.jqueryui.com/position/ mais je suis pressé ...

6
derekg

Je dois appeler la fonction dialog() deux fois pour positionner le dialogue (jQuery v1.11.2/jQueryUI v1.10.4).

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});
5
okki

Le paramètre de position suivant a fonctionné pour moi

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

Bonne chance!

4
Rakesh Prajapati

Jquery UI 1.9.2, jquery et les versions ultérieures ne supportent pas IE8 

J'ai trouvé deux solutions pour cela. 

  1. Revenir à jquery UI 1.7.2 pour supporter IE8,

  2. Essayez ce code avec Jquery UI 1.9.2 

position: {my: "center",  at: "center", of: $("body"),within: $("body") }
4
r-arun-r

Une autre chose qui peut vous donner du fil à retordre avec le positionnement de JQuery Dialog, en particulier pour les documents plus grands que le port d'affichage du navigateur - vous devez ajouter la déclaration

<!DOCTYPE html>

En haut de votre document.

Sans cela, jQuery tend à placer la boîte de dialogue au bas de la page et des erreurs peuvent survenir lorsque vous essayez de la faire glisser.

3
thedrs

Selon la discussion suivante, le problème pourrait être dû à une moindre compatibilité IE dans les nouvelles versions de jQuery, revenir à la version 1.7.2 semble résoudre le problème, ce qui ne se produit que dans IE8 . http: //forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8

3
vm370

Pour l’environnement Win7/IE9, définissez simplement dans votre fichier css:

.ui-dialog {
   top: 100px;
   left: 350px !important;
}
2
Nikolay

Si vous utilisez des fichiers jquery individuels ou un téléchargement personnalisé jquery, assurez-vous également que jquery.ui.position.js a été ajouté à votre page. 

2
Ioannis Suarez

Vous rencontrez ceci dans IE uniquement? Si c'est le cas, essayez d'ajouter ceci à la PREMIÈRE ligne de la balise HEAD de votre page:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

J’avais pensé que tous les problèmes de compatibilité avaient été résolus plus tard dans jQueries, mais j’ai rencontré celui-ci aujourd’hui.

2
John

Essayez ceci avec les anciennes versions et ceux qui ne veulent pas utiliser position:

$("#dialog-div-id").dialog({position: ['center', 'top'],....
2
Aneesh Vijendran

Si vous utilisez jquery ui sur des appareils mobiles, vous devez également procéder à un recentrage manuel. La boîte de dialogue est manuellement positionnée via une propriété CSS 'left & top'. si l'utilisateur change d'orientation, le positionnement n'est plus centré et doit être adapté/recentré ensuite.

2
gekido

J'ai eu un problème avec cela et j'ai finalement compris cela. Jusqu'à aujourd'hui, j'utilisais une très ancienne version de jQuery, la version 1.8.2.

Partout où j’avais utilisé dialog je l’avais initialisé avec l’option de position suivante:

$.dialog({
    position: "center"
});

Cependant, j'ai constaté que supprimer position: "center" ou le remplacer par la syntaxe correcte ne suffisait pas, par exemple:

$.dialog({
    position: {
       my: "center",
       at: "center",
       of: window
    }
});

Bien que ce qui précède soit correct, j’utilisais aussi option pour définir la position comme centre lorsque je chargeais la page, à l’ancienne, comme suit:

// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");

Cela provoquait le blocage de toutes mes fenêtres de dialogue en haut à gauche du port de visualisation.

Je devais remplacer toutes les instances de ceci par la nouvelle syntaxe correcte ci-dessous:

passwordDialogInstance.dialog(
    "option",
    "position", 
    { my: "center", at: "center", of: window }
);
1
Luke

J'ai corrigé avec css: 

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}
0
Liko