Comment puis-je placer mon dialogue jQuery au centre?

Question

J'ai essayé code suivant, mais il positionne uniquement les dialogues gauche position de coin supérieur au centre, et qui fait l'élément à être aligné à droite. Comment puis-je dialogue centre à centre réel qui compte la largeur des éléments, de sorte que la ligne centrale coupera dialogue à 50% 50% halfs?

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

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

Answer 1

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

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

devrait centre par défaut .

J'ai eu un coup d'œil à l'article, et également vérifié ce qu'il dit sur le jquery officiel le site -ui sur le positionnement d'un dialogue : et il a été discuté 2 états de:. initialisez et après initialiser

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

Initialiser une boîte de dialogue avec l'option de position spécifiée.

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

Get ou définir l'option de position, après initialisation.

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

Je pense que si vous deviez retirer la position attribut que vous trouveriez centres par lui-même d'autre essayer la deuxième option setter où vous définissez 3 éléments de « option » « position » et « centre ».

Answer 2

La dernière jQuery UI a une composante de position:

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

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

Answer 3

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

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

Answer 4

Donc, si quelqu'un frappe cette page comme je l'ai fait, ou quand j'oublie en 15 minutes, j'utilise jQueryUI la version 1.10.1 de dialogue et jquery 1.9.1 avec IE8 dans un iframe (bla), et il a besoin d'un au sein spécifié ou il ne fonctionne pas, par exemple

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

Merci à @ vm370 pour moi pointant dans la bonne direction.

Answer 5

open: function () {

    var win = $(window);

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

Answer 6

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

Answer 7

Essayez ceci ....

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

Answer 8

Je reçois les meilleurs résultats pour mettre dialogue jQuery dans le centre de la fenêtre du navigateur avec:

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

Il y a probablement moyen plus précis pour le positionner avec l'option " en utilisant " comme décrit dans la documentation à l'adresse http://api.jqueryui.com/position/ mais je suis pressé ...

Answer 9

Je dois appeler la fonction dialog() deux fois pour placer la boîte de dialogue (jQuery v1.11.2 / jQueryUI v1.10.4).

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

Answer 10

Après paramètre de position a fonctionné pour moi

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

Bonne chance!

Answer 11

Jquery UI 1.9.2, jquery et les versions ultérieures prennent en charge n » IE8

J'ai trouvé deux solutions pour cela.

1. Rollback à jquery UI 1.7.2 pour soutenir IE8,

2. Essayez ce code avec Jquery UI 1.9.2

position: {my: "center",  at: "center", of: $("body"),within: $("body") }

Answer 12

D'après la discussion qui suit, le problème pourrait être dû à la compatibilité IE moins dans les versions plus récentes jQuery, revenir en arrière à 1.7.2 semble résoudre le problème, qui ne se produit que dans IE8. http://forum.jquery.com / sujet / jquery-ui-dialogue-positionnement sans travail en 8-à-dire

Answer 13

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

<!DOCTYPE html>

En haut de votre document.

Sans elle, jquery tend à mettre la boîte de dialogue au bas de la page et des erreurs peuvent se produire lorsque vous essayez de le faire glisser.

Answer 14

Si vous utilisez des fichiers individuels ou jquery téléchargement jquery personnalisé soit vous avez aussi faire place à vous jquery.ui.position.js ajouté à votre page.

Answer 15

Courez-vous dans ce que dans IE? Si oui, 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 bien que tous les problèmes de compatibilité ont été fixés dans jQueries plus tard, mais je suis tombé sur celui-ci aujourd'hui.

Answer 16

Essayez ceci pour les versions antérieures et quelqu'un qui ne veulent pas utiliser la position:

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

Answer 17

Vous devez également faire recentrement manuel si vous utilisez ui jquery sur les appareils mobiles - la boîte de dialogue est positionné manuellement via une « gauche et top » propriété CSS. si l'utilisateur passe d'orientation, le positionnement n'est centré plus, et doit être adapté / recentrées par la suite.

Answer 18

Pour l'environnement Win7 / IE9 qui se trouve juste votre fichier CSS:

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

Answer 19

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

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

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

Cependant, je trouve que la suppression position: "center" ou le remplacer par la syntaxe correcte n'a pas fait l'affaire, par exemple:

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

Bien que ce qui précède est correct, j'utilise également option pour régler la position de centre quand je chargé la page, à l'ancienne, comme suit:

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

Cela a été à l'origine toutes mes fenêtres de dialogue pour coller à la partie supérieure gauche du port de vue.

Je devais remplacer toutes les occurrences de ce avec la syntaxe correcte nouvelle ci-dessous:

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

Answer 20

Je fixe avec css:

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

Answer 21

Impossible d'obtenir IE9 pour centrer la boîte de dialogue.

fixe en ajoutant ceci au css:

.ui-dialog {
    left:1%;
    right:1%;
}

Pourcentage n'a pas d'importance. Tout petit nombre travaillé.