web-dev-qa-db-fra.com

la boîte de dialogue de l'interface utilisateur jQuery n'est pas positionnée au centre de l'écran

J'ai une boîte de dialogue jQuery qui est censée se positionner au milieu de l'écran. Cependant, il semble légèrement décentré verticalement. 

Voici le code:

$('#add_box').dialog({
    autoOpen: true,
    width: 300,
    modal: true,
    resizable: false,
    bgiframe:true
});

Des idées pourquoi cela ne va pas centrer?

jqueryjquery-uidialogposition
38
David

Si votre fenêtre est défilée après l'affichage de la boîte de dialogue, elle ne sera plus centrée. Il est possible de faire défiler la fenêtre par inadvertance en ajoutant/supprimant du contenu de la page. Vous pouvez recentrer la fenêtre de dialogue pendant les événements de défilement/redimensionnement en appelant:

$('my-selector').dialog('option', 'position', 'center');
50
Ken Browning

Ajoutez-vous jquery.ui.position.js à votre page? J'ai eu le même problème, vérifié le code source ici et réalisé que je n’avais pas ajouté ce js à ma page, après cela .. un dialogue centré comme par magie.

34
Eugenio Miró

Déterrer une vieille tombe ici, mais pour les nouveaux chercheurs de Google.

Vous pouvez conserver la position de la fenêtre du modèle lorsque les utilisateurs font défiler en ajoutant cet événement à votre boîte de dialogue. Cela le changera de position absolue à fixe. Pas besoin de surveiller les événements de défilement.

open: function(event, ui) {
    $(this).parent().css('position', 'fixed');
}
28
jfraser

J'avais le même problème. Il s’agit du plugin jquery.dimensions.js. Si je l'ai enlevé, tout a bien fonctionné. Je l'ai inclus à cause d'un autre plugin qui l'exigeait, mais le lien ici a révélé que les dimensions étaient incluses dans le noyau jQuery il y a longtemps ( http://api.jquery.com/category/ dimensions ). Vous devriez pouvoir vous débarrasser simplement du plugin Dimensions.

14
coryvb123

Ajoutez simplement ci-dessous la ligne CSS dans la même page.

.ui-dialog 
{
position:fixed;
}
10
Rajkishor Sahu

1.) La boîte de dialogue jQuery est centrée sur l’élément de votre choix. 

Sans plus d’informations, j’imagine que vous avez un corps avec une marge ou un objet similaire. Déplacez le menu contextuel au niveau du corps, et vous serez prêt à partir.

2.) Si vous ajoutez dynamiquement du contenu à la div lors de son chargement, le centrage ne sera PAS correct. N'affichez PAS le div tant que vous n'avez pas les données que vous y mettez.

10
Stefan Kendall

Ajoutez ceci à votre déclaration de dialogue

my: "center",
at: "center",
of: window

Exemple :

$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})
6
Taksh

Pour résoudre ce problème, je me suis assuré que la taille de mon corps était réglée à 100%.

body { height:100% }

Cela maintient également la position centrale pendant que l'utilisateur fait défiler.

4
user781058

Pour moi, jquery.dimensions.js était le coupable

3
Eswar

Ce problème est souvent lié à l'ouverture de la boîte de dialogue via une balise d'ancrage (<a href='#' id='openButton'>Open</a>) et à ne pas empêcher le comportement du navigateur par défaut dans le gestionnaire, par exemple.

$('#openButton').click(function(event) {
   event.preventDefault();
   //open dialog code...
});

Cela supprime généralement le besoin de plugins de positionnement/défilement.

3
Rob Willis

Je me trouvais confronté au même problème, à savoir que la boîte de dialogue ne s'ouvrait pas et que je faisais défiler la page en haut. La balise que j'utilise pour ouvrir la boîte de dialogue est une balise d'ancrage: 

<a href="#">View More</a> 

Le symbole de la livre causait le problème pour moi. Tout ce que je fis fut de modifier le href dans l'ancre comme ceci: 

<a href="javascript:{}">View More</a> 

Maintenant, ma page est heureuse et centrée sur les dialogues.

2
Jimbo

Mon scénario: Je devais faire défiler la page vers le bas pour ouvrir la boîte de dialogue en cliquant sur un bouton. En raison du défilement de la fenêtre, la boîte de dialogue ne s'ouvrait pas verticalement au centre de la fenêtre.

Comme Ken a mentionné ci-dessus, après avoir défini votre contenu modal, exécutez la déclaration ci-dessous.

$("selector").dialog('option', 'position', 'center');

Si le contenu est préchargé avant les ouvertures modales, il suffit d'exécuter ceci dans un événement open, Else manipuler DOM dans un événement open, puis d'exécuter une instruction.

$( ".selector" ).dialog({
open: function( event, ui ) {
//Do DOM manipulation if needed before executing below statement
$(this).dialog('option', 'position', 'center');
}
});

Cela a bien fonctionné pour moi et la meilleure chose à faire est que vous n'incluez aucun autre plugin ou bibliothèque pour que cela fonctionne.

2
Sanjeev

J'ai dû ajouter ceci en haut de mon fichier HTML: <!doctype html>. Je n'avais pas besoin de définir la propriété position. Ceci est avec jQuery 3.2.1. En 1.7.1, cela n'était pas nécessaire.

1
user2233706

Aucune des solutions ci-dessus n'a semblé fonctionner pour moi car mon code génère dynamiquement deux divs contenant et dans cette image une image non mise en cache. Ma solution était la suivante:

Veuillez noter l'appel "load" sur img et le paramètre "close" dans l'appel de dialogue. 

 var div = jQuery ('<div> </ div>') 
 .attr ({id: 'previewImage'}) 
 .appendTo ('body') 
 .hide (); 
 var div2 = jQuery ('<div> </ div>') 
 .css ({
 maxWidth: parseInt (jQuery (fenêtre) .width () * .80) + 'px' 
, maxHeight: parseInt (jQuery (fenêtre) .height () * .80) + 'px '
, débordement:' auto '
}) 
 .appendTo (div); 
 var img = jQuery ('<img>') 
 .attr ({'src': url}) 
 .appendTo (div2) 
 .load (function () {
 div.dialog ({
 'modal': true 
, 'width': 'auto' 
, close: function () {
 div.remove (); 
} 
}); 
});
1
shmuel613

Juste résolu le même problème, le problème était que je n’avais pas importé certains fichiers js, comme widget.js :)

1
vach

pour positionner le dialogue au centre de l'écran:

$('#my-selector').parent().position({
                    my: "center",
                    at: "center",
                    of: window
});
0
Omar Ben Salah

Vous devez ajouter la déclaration

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.

0
thedrs

J'ai eu le même problème, qui a été résolu lorsque j'ai entré une hauteur pour le dialogue:

$("#dialog").dialog({
    height: 500,
    width: 800
});
0
Carl

Voici comment j'ai résolu le problème, j'ai ajouté cette fonction ouverte du dialogue:

  open: function () {
                $('.ui-dialog').css("top","0px");                                
                    }

Ceci ouvre maintenant la boîte de dialogue en haut de l'écran, peu importe où la page défile et dans tous les navigateurs.

0
Nick Benedict
$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})

Cette solution fonctionne, mais uniquement parce que les versions plus récentes de jQuery l'ignorent complètement et retombent par défaut, ce qui correspond exactement à ceci: . Vous pouvez donc simplement supprimer la position: 'center' de vos options si vous souhaitez simplement afficher la fenêtre être centré.

0
Tassilo Singhammer