boîte de dialogue jQuery UI pas positionné centre de l'écran

Question

J'ai une boîte de dialogue jQuery qui est destiné à la position au milieu de l'écran. Cependant, il semble un peu décentré verticalement.

Voici le code:

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

Toutes les idées pourquoi ce ne sera pas centre?

Answer 1

Si votre fenêtre se défile après l'affichage de dialogue, il ne sera plus centrée. Il est possible de provoquer involontairement la fenêtre pour faire défiler par l'ajout / suppression du contenu de la page. Vous pouvez recentrera la fenêtre de dialogue au cours de défilement / redimensionner les événements en appelant:

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

Answer 2

Ajoutez-vous jquery.ui.position.js à votre page? J'ai eu le même problème, vérifié le code source et réalisé que je ne l'ai pas ajouter que js à ma page, après .. DIALOG magie centrée.

Answer 3

Fouiller une vieille tombe ici, mais pour les nouveaux utilisateurs de Google.

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

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

Answer 4

Je faisais le même problème. Il a fini par être le jquery.dimensions.js plugin. Si je l'ai enlevé, tout a bien fonctionné. J'inclus parce que d'un autre plug-in qui a nécessité, cependant j'ai découvert le lien ici que les dimensions ont été inclus dans le noyau jQuery il y a un certain temps tout à fait ( http://api.jquery.com/category/dimensions ). Vous devriez être ok simplement se débarrasser du plugin dimensions.

Answer 5

1.) Les centres de dialogue jQuery dans tout élément que vous mettez dans.

Sans plus d'informations, je suppose que vous avez un div corps avec une marge ou quelque chose de similaire. Déplacez le div pop-up au niveau du corps, et vous serez bon d'aller.

2.) Si vous ajoutez du contenu dynamique à la div que vous chargez, le centrage ne sera pas correcte. Ne pas afficher la div jusqu'à ce que vous avez la your'e de données mettant en elle.

Answer 6

Il suffit d'ajouter la ligne ci-dessous CSS dans la même page.

.ui-dialog 
{
position:fixed;
}

Answer 7

Pour résoudre ce problème, je me suis assuré ma taille du corps a été fixé à 100%.

body { height:100% }

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

Answer 8

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

Answer 9

Pour moi jquery.dimensions.js était le Culprit

Answer 10

Cette question est souvent liée à 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 la nécessité d'un positionnement / plugins défilement.

Answer 11

Je faisais face à la même question d'avoir la boîte de dialogue non ouverture centrée et en faisant défiler ma page vers le haut. L'étiquette 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 a été l'origine du problème pour moi. Je ne ai fait modifier le href dans l'ancre comme ceci:

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

Maintenant, ma page est heureux et centrer les dialogues.

Answer 12

Mon scénario: Je devais faire défiler la page pour ouvrir le dialogue sur un bouton clic, grâce à la fenêtre de défilement la boîte de dialogue n'a pas d'ouverture du centre verticalement à la fenêtre, il sortait de vue port .

Ken a mentionné ci-dessus, après avoir configuré l'exécution de votre contenu modal ci-dessous déclaration.

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

Si le contenu est pré-chargé avant modal exécuter tout ce ouvre en événement ouvert, d'autre manipuler DOM en cas ouvert et exécuter l'instruction.

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

Il a bien fonctionné pour moi et la meilleure chose est que vous ne pas inclure tout autre plug-in ou d'une bibliothèque pour que cela fonctionne.

Answer 13

Il suffit de résoudre le même problème, la question était que je ne pas importé certains fichiers js, comme widget.js:)

Answer 14

Aucune des solutions ci-dessus ne semblait fonctionner pour moi depuis que mon code génère dynamiquement deux divs containting et dans cette une image non mis en cache. Ma solution est la suivante:

S'il vous plaît noter le paramètre 'charge' appel à img, et 'fermer' 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(window).width() *.80) + 'px'
                      , maxHeight: parseInt(jQuery(window).height() *.80) + 'px'
                      , overflow: 'auto'
                  })
                  .appendTo(div);
var img = jQuery('<img>')
                  .attr({'src': url})
                  .appendTo(div2)
                  .load(function() {
                      div.dialog({
                          'modal': true
                          , 'width': 'auto'
                          , close: function() {
                               div.remove();
                          }
                      });
                  });

Answer 15

Je devais ajouter à la partie supérieure de mon fichier HTML: <!doctype html>. Je n'ai pas besoin de définir la propriété position. Ceci est avec jQuery 3.2.1. En 1.7.1, qui n'a pas été nécessaire.

Answer 16

Voilà comment je résolu la question, j'ai ajouté cette fonction ouverte de la boîte de dialogue:

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

Cela ouvre maintenant la boîte de dialogue en haut de l'écran, peu importe où la page est défilée à et dans tous les navigateurs.

Answer 17

pour positionner la boîte de dialogue dans le centre de l'écran:

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

Answer 18

J'ai eu le même problème, qui a été fixé quand je suis entré dans une hauteur de la boîte de dialogue:

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

Answer 19

Vous devez ajouter la déclaration

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 20

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

Cette solution ne fonctionne, mais seulement en raison des versions jQuery ignorant complètement ce et les nouveaux repassent à la valeur par défaut, ce qui est exactement cela. Ainsi, vous pouvez simplement supprimer la position:. « Centre » de vos options si vous voulez juste la pop-up de centrer