Comment positionner mon dialogue jQuery au centre ?

Question

J'ai essayé le code suivant, mais il ne positionne que le coin supérieur gauche de la boîte de dialogue au centre, ce qui fait que l'élément est aligné à droite. Comment puis-je centrer le dialogue sur le centre réel qui compte la largeur des éléments, de sorte que la ligne centrale coupe le dialogue en deux à 50 % ?

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

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

Answer 1

La dernière version de jQuery UI possède un composant de position :

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

Doc : http://jqueryui.com/demos/position/
Allez-y : http://jqueryui.com/download

Answer 2

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

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

doit être centré par défaut .

J'ai jeté un coup d'œil à l'article, et j'ai également vérifié ce qui est dit sur le site Web de l'UE. site officiel de jquery-ui sur le positionnement d'un dialogue Il y est question des deux états suivants : initialisation et après initialisation.

Exemples de code - (tiré de jQuery UI 2009-12-03)

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

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

Obtenir ou définir 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 supprimez l'attribut position, vous constaterez qu'il se centre tout seul ; sinon, essayez la deuxième option de réglage où vous définissez 3 éléments de "option" "position" et "centre".

Answer 3

Parce que le dialogue a besoin d'une position, vous devez inclure la position de js

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

Answer 4

Donc si quelqu'un tombe sur cette page comme je l'ai fait, ou pour le cas où j'oublierais dans 15 minutes, j'utilise jqueryui dialog version 1.10.1 et jquery 1.9.1 avec ie8 dans un iframe(blah), et il faut spécifier un within ou ç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.

Answer 5

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)
    });
}