jQuery dialogue toujours centré

Comment puis-je mettre en œuvre, une boîte de dialogue modale jQuery avec largeur auto & hauteur est toujours centré dans le navigateur. Aussi, après le redimensionnement de la fenêtre du navigateur.

Le code suivant ne fonctionne pas. Je pense que le problème est la largeur auto & hauteur.

jQuery - code

$("<div class='popupDialog'>Loading...</div>").dialog({
  autoOpen: true,
  closeOnEscape: true,
  height: 'auto',
  modal: true,
  title: 'About Ricky',
  width: 'auto'
}).bind('dialogclose', function() {
  jdialog.dialog('destroy');
}).load(url, function() {
  $(this).dialog("option", "position", ['center', 'center'] );
});

$(window).resize(function() {
  $(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});

Merci!

Lier la resize de l'événement sur la window et mise à jour de votre top/left positionnement en conséquence
Comment peut-il la marque de votre commentaire que la bonne réponse, je me demande? 🙂
J'ai mis à jour ma question.

OriginalL'auteur shub | 2011-09-26

7

Acutally, je pense que le position: ["center", "center"] ne pas être la meilleure solution, car elle affecte un explicit top: et left: propriétés css à la boîte de dialogue basé sur la taille de la fenêtre d'affichage lors de la création.

Je suis tombé sur cette même question, quand on cherche à avoir une boîte de dialogue centre de l'écran à la verticale. Voici ma solution:

Dans le options partie de mon .dialog() fonction, je passe position:[null, 32]. Le null définit la left: valeur de l'élément du style, et la 32 est juste pour garder la boîte de dialogue rattachée à la partie supérieure de la fenêtre. Aussi assurez-vous de définir explicitement la largeur.

J'utilise aussi le dialogClass possibilité d'affecter une classe personnalisée, qui est simplement un margin:0 auto; propriété css:
```
.myClass{
    margin:0 auto;
}
```
Et mon dialogue ressemble:
```
  $('div#popup').dialog({
    autoOpen: false,
    height: 710,
    modal: true,
    position: [null, 32],
    dialogClass: "myClass",
    resizable: false,
    show: 'fade',
    width: 1080
  });
```
J'espère que cela aide quelqu'un.

OriginalL'auteur CamelBlues
4
```
$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});
```
De travail jsFiddle: http://jsfiddle.net/vNB8M/

La boîte de dialogue est centré avec largeur auto & hauteur et continue à être centré fois la fenêtre de redimensionnement.

Malheureusement, cela ne fonctionne pas, jetez un oeil à mon code.
Ce n'est pas "travailler"? Pouvez-vous décrire le problème plus en détail?
La boîte de dialogue ne sera pas centré si je re-taille de la fenêtre du navigateur. Avec width & height = auto la boîte de dialogue est placé dans le coin inférieur droit.
Vous avez vu mon jsFiddle? Le code de travail. Votre problème doit se situer ailleurs. Ce CSS est appliqué?
Merci pour le code. Malheureusement, votre code ne fonctionne pas avec .load(url, function(). C'est le défi pour moi de porter ce code de travail avec le load méthode.

OriginalL'auteur NakedBrunch
1

Aucune des réponses n'aient tout à fait ce que je voulais. Pour ceux qui sont encore avoir des problèmes avec cela, voici ce qui a fonctionné pour moi. Ce sera la force de la boîte de dialogue apparaisse toujours dans le centre de l'écran, et il sera le centre de la boîte de dialogue du navigateur est redimensionnée.
```
$( "#ShowDialogButton" ).click(function(){
    $( "#MyDialog" ).dialog({
       show: 'fade'
     }).dialog( "option", "position", { my: "center", at: "center", of: window } );

    $(window).resize(function() {
        $( "#MyDialog" ).dialog( "option", "position", { my: "center", at: "center", of: window } );
    });

});
```
Encore une fois, si cela fonctionne pour vous, c'est parce que vous n'êtes pas le chargement dynamique de contenu. Vos conditions spécifiques de jure de ce que l'original a demandé.

OriginalL'auteur Dan
0

La fenêtre modale autour de la boîte de dialogue devrait vous permettre de placer la boîte de dialogue centré avec le css de:
```
margin-left:auto;margin-right:auto;
```
N'est-ce pas le travail? Avez-vous un "échantillon" de la page que l'on peut regarder?

Ce ne serait pas la position de la zone le long de l'axe des Y

OriginalL'auteur TeckniX
0

Cette solution fonctionne:
```
$(window).resize(function () 
{
    $("#myDialog").dialog("close");
    $("#myDialog").dialog("open");
});
```
Performance est assez mauvais, mais vous pouvez attendre pour redimensionner fin: jQuery - comment attendre la " fin " de la 'redimensionner' événement et seulement ensuite effectuer une action?.

J'ai aussi essayé cela, mais je ne peux pas faire défiler plus bas ou plus haut que la position de l'élément qui a ouvert de la boîte de dialogue:
```
$(window).scroll(function () 
{
    $("#myDialog").dialog("close");
    $("#myDialog").dialog("open");
});
```
OriginalL'auteur alcohol is evil

Vous devez vous connecter pour publier un commentaire.