jQuery UI boîte de dialogue n'est pas positionné le centre de l'écran
J'ai un jQuery boîte de dialogue qui est destiné à la position dans le milieu de l'écran. Cependant, il semble un peu hors-centrer verticalement.
Voici le code:
$('#add_box').dialog({
autoOpen: true,
width: 300,
modal: true,
resizable: false,
bgiframe:true
});
Des idées pourquoi ça ne va pas le centre?
- Que diriez-vous une capture d'écran? Semble-t-il hors-centre, ou est-il au centre?
- Merci de poster votre CSS, aussi
- pourquoi les barres obliques dans votre sélection?
- ah oui, et les gens perçoivent le fossé au-dessus d'un objet plus grand qu'il est vraiment. c'est pourquoi certains artistes le haut de l'écart de plus courte lorsque le cadrage. je ne serais pas surpris si la boîte de dialogue gars a fait quelque chose de similaire pour l'esthétique.
- Vous devez également définir la hauteur de la boîte de dialogue pour obtenir le verticle correcte lors de l'initialisation
Vous devez vous connecter pour publier un commentaire.
Si votre fenêtre d'affichage défile après la boîte de dialogue s'affiche, il ne sera plus centré. Il est possible de involontairement à cause de la fenêtre pour faire défiler en ajoutant/supprimant tout le contenu de la page. Vous pouvez recentrer la fenêtre de dialogue au cours de défilement/redimensionner les événements en appelant le:
Êtes-vous ajouter jquery.ui.position.js pour votre page?
J'ai eu le même problème, vérifier le code source ici et réalisé que je n'avais pas d'ajouter que js de ma page, après que.. dialogue comme par magie centré.
Déterrer une vieille tombe ici, mais pour les nouvelles de Google les chercheurs.
Vous pouvez maintenir la position de la fenêtre du modèle lorsque l'utilisateur fait défiler par l'ajout de cet événement à votre boîte de dialogue. Cela va changer de position absolue à fixe. Pas besoin de surveiller les événements de défilement.
J'ai eu le même problème. Il a fini par être la jquery.dimensions.js plugin. Si je l'ai enlevé, tout a bien fonctionné. Je l'ai inclus en raison d'un autre plugin qui en ont besoin, cependant, je l'ai découvert à partir du lien ici que les dimensions a été inclus dans la base jQuery tout à fait il ya un moment (http://api.jquery.com/category/dimensions). Vous devriez être ok tout simplement se débarrasser de l'dimensions plugin.
1.) Le jQuery dialogue centres dans quel élément que vous mettez dans.
Sans plus d'informations, je suppose que vous avez un corps de div avec une marge ou quelque chose de semblable. Déplacer le popup div au niveau du corps, et vous serez bon d'aller.
2.) Si vous ajouter dynamiquement le contenu de la div que vous chargez, le centrage ne sera PAS correct. Ne PAS afficher la div jusqu'à ce que vous avez les données de votre e mettre en elle.
Simplement ajouter ci-dessous les CSS la ligne dans la même page.
Ajouter à votre boîte de dialogue déclaration
Exemple :
Pour résoudre ce problème, j'ai pris soin de mon corps, la hauteur est de 100%.
Cela assure également la position centrale lorsque l'utilisateur fait défiler.
Pour moi jquery.dimensions.js était le Coupable
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 de ne pas empêcher le navigateur par défaut de comportement dans le gestionnaire par exempleGénéralement, ceci élimine le besoin pour n'importe quel positionnement /défilement des plugins.
J'ai été confronté à la même question d'avoir la boîte de dialogue ne s'ouvre pas centré et le défilement de la page ma page vers le haut. Le tag que j'utilise pour ouvrir la boîte de dialogue est une balise d'ancrage:
<a href="#">View More</a>
Le symbole livre a été à l'origine du problème pour moi. Je n'ai fait que modifier le href de l'ancre de la sorte:
<a href="javascript:{}">View More</a>
Maintenant, ma page est heureux et le centrage des boîtes de dialogue.
Mon Scénario: j'ai eu à faire défiler vers le bas de la page pour ouvrir le dialogue sur un clic de bouton, en raison de défilement de la fenêtre de la boîte de dialogue n'était pas de l'ouverture à la verticale du centre de la fenêtre, c'était de sortir de la vue-port.
Comme Ken a mentionné ci-dessus , après avoir défini votre modal contenu exécuter déclaration ci-dessous.
Si le contenu est pré-chargé avant modale s'ouvre exécuter ce dans l'événement open,
d'autre manipuler le DOM dans l'événement open et ensuite exécuter l'instruction.
Il a bien fonctionné pour moi et la meilleure chose est que vous n'avez pas à inclure un autre plugin ou de la bibliothèque pour qu'il fonctionne.
Viens de résoudre le même problème, le problème était que je n'ai pas d'importer des fichiers js, comme widget.js 🙂
Aucune des solutions ci-dessus ne semblait fonctionner pour moi, car mon code est de générer dynamiquement deux containting divs et que dans un non mise en cache de l'image. Ma solution a été comme suit:
Veuillez noter que la "charge" d'appel sur img, et de la "fermer" paramètre dans la boîte de dialogue appel.
J'ai dû ajouter présent en haut de mon fichier HTML:
<!doctype html>
. Je n'ai pas besoin de définir laposition
de la propriété. C'est avec jQuery 3.2.1. Dans 1.7.1, qui n'était pas nécessaire.C'est comment j'ai résolu le problème, j'ai ajouté cette fonction d'ouverture de la boîte de dialogue:
Maintenant cela ouvre la boîte de dialogue en haut de l'écran, quel que soit l'endroit où la page est affichée et dans tous les navigateurs.
de position de la boîte de dialogue dans le centre de l'écran :
J'ai eu le même problème qui a été résolu quand je suis entrée à la hauteur de la boîte de dialogue:
Vous devez ajouter la déclaration
En haut de votre document.
Sans elle, jquery tend à mettre la boîte de dialogue sur le bas de la page et des erreurs peuvent se produire lorsque vous tentez de la faire glisser.
Cette solution fonctionne, mais seulement parce que les nouvelles versions de jQuery en ignorant complètement ce et de revenir à la valeur par défaut, c'est exactement cela.
Ainsi, vous pouvez simplement supprimer position: 'centre' de vos options si vous voulez juste de la pop à être centré.