J'ai une boîte de dialogue jQuery qui est censée se positionner au milieu de l'écran. Cependant, elle semble légèrement décentrée verticalement.
Voici le code :
$('#add_box').dialog({
autoOpen: true,
width: 300,
modal: true,
resizable: false,
bgiframe:true
});Une idée de la raison pour laquelle il ne se centre pas ?
Si votre fenêtre défile après l'affichage de la boîte de dialogue, celle-ci ne sera plus centrée. Il est possible d'entraîner involontairement le défilement de la fenêtre en ajoutant ou en retirant 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');
Cette solution n'a pas résolu le problème. Elle a permis à la boîte de dialogue de défiler dans certains cas, mais pas d'une manière que je jugerais acceptable pour une page de niveau production. Le défilement était très saccadé et, dans Firefox, le défilement était en fait inversé. La principale raison du vote négatif est que la boîte de dialogue s'ouvre toujours hors écran.
Le problème était que je chargeais / affichais le contenu par ajax après avoir créé la fenêtre modale, de sorte qu'elle n'était pas centrée sur le contenu lui-même.
Avez-vous ajouté jquery.ui.position.js à votre page ? J'ai eu le même problème, j'ai vérifié le code source aquí et j'ai réalisé que je n'avais pas ajouté ce js à ma page, après ça le dialogue s'est centré comme par magie.
Vous aurez également besoin de jquery.ui.draggable.js si vous voulez faire glisser la boîte de dialogue.
Voici un bel exemple de code qui résout le problème du centrage vertical de la fenêtre de dialogue JQuery UI. La solution est que si vous manquez <!doctype html> le centrage vertical ne fonctionnera pas correctement. Si vous avez dans votre code HTML cette déclaration il fonctionnera correctement ha ha ! !!
Je déterre une vieille tombe ici mais pour les nouveaux chercheurs de Google.
Vous pouvez maintenir la position de la fenêtre du modèle lorsque les utilisateurs font défiler la fenêtre en ajoutant cet événement à votre boîte de dialogue. Cela la fera passer d'une position absolue à une position fixe. Il n'est pas nécessaire de surveiller les événements de défilement.
open: function(event, ui) {
$(this).parent().css('position', 'fixed');
}
J'avais le même problème. Cela a fini par être le jquery.dimensions.js plugin. Si je le supprime, tout fonctionne bien. Je l'ai inclus à cause d'un autre plugin qui le nécessitait, mais j'ai découvert en suivant le lien aquí que les dimensions ont été incluses dans le noyau de jQuery il y a un certain temps ( http://api.jquery.com/category/dimensions ). Vous devriez pouvoir vous débarrasser simplement du plugin de dimensions.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
Que diriez-vous d'une capture d'écran ? Est-ce que ça semble décentré, ou es il est décentré ?
0 votes
Pourquoi les barres obliques dans votre sélecteur ?
0 votes
Oh oui, et les gens perçoivent l'espace au-dessus d'un objet plus grand qu'il ne l'est en réalité. c'est pourquoi certains artistes raccourcissent l'espace supérieur lors du cadrage. je ne serais pas surpris que les gars du dialogue fassent quelque chose de similaire pour des raisons esthétiques.
1 votes
Vous devez également définir la hauteur de la boîte de dialogue pour que la verticale soit correcte lors de l'initialisation.