fenêtre de défilement lorsque dialogue jquery ouvre

Question

Je suis en train d'ouvrir une boîte de dialogue jquery modale utilisant jquery 1.4 et jquery-ui-1.8rc3.custom.js

La boîte de dialogue ouvre sans problème, dans tous les navigateurs, mais dans IE 7 et 6, après que la boîte de dialogue s'ouvre, la fenêtre défile elle-même vers le buttom ... J'ai essayé de faire défiler la fenêtre jusqu'à la position modale mais elle est très incohérente. utilisait la ligne de code suivante après l'ouverture du modal

window.scrollTo($('#selector').dialog('option', 'position')[0],$('#selector').dialog('option', 'position')[1]); 

Une chose étrange je remarque est que, après j'ouvre le modal, la page devient énorme ... comme si certaines choses supplémentaires ajoute sur la bas .... et il finit par défiler vers le bas. Toute idée pourquoi cela pourrait être hapenning

en html

<div id="selector"> 
</div> 

dans document.ready

$('#selector').dialog({ 
    bgiframe: true, 
    autoOpen: false, 
    width: 100, 
    height: 100, 
    modal: true, 
    position: 'top' 
}); 

dans js

$('#selector').dialog('open'); 

Answer 1

On dirait que vous manque le # dans votre sélecteur:

window.scrollTo($('#selector').dialog('option', 'position')[0], $('#selector').dialog('option', 'position')[1]); 

peut être la raison pour laquelle la fenêtre défile vers le coin supérieur gauche.

---

Edit: Je cherchais juste à la documentation et .dialog('option','position') valeur par défaut est center.

Type de poste: String, Array Par défaut: 'centre'

Indique où doit être affiché la boîte de dialogue. Valeurs possibles: 1) une seule chaîne représentant la position dans la fenêtre d'affichage: 'centre', 'gauche', 'droite', 'haut', 'bas'. 2) un tableau contenant une paire de coordonnées x, y en pixel décalé par rapport à gauche, coin supérieur de fenêtre (par exemple [350,100]) 3) un tableau contenant des valeurs de chaîne de position x, y (par exemple ['right', 'top'] pour le coin supérieur droit ).

Vous pouvez ainsi obtenir du texte ou des chiffres renvoyés à l'aide de l'option de position et window.scrollTo() requiert des nombres. Donc, essayez ceci:

var d = $(".ui-dialog").position(); 
window.scrollTo(d.left , d.top); 

Answer 2

J'ai eu une situation similaire où la boîte de dialogue a été l'ouverture où il devrait sur la page, mais l'utilisateur a été redirigé vers le bas de la page. Fondamentalement, j'ai oublié d'inclure le css approprié pour correspondre à la bibliothèque jQuery UI JavaScript. En faisant cela, tout allait bien. J'imagine que c'est quelque chose comme ça, où il y a des styles définis sur des éléments sur le css jQuery qui ne sont pas définis dans votre propre CSS. Pour déboguer le problème afin de ne pas avoir à inclure l'ensemble de l'interface utilisateur jQuery, j'ai créé deux pages identiques, une utilisant le css de l'interface utilisateur jQuery et une autre, et j'ai vérifié ce qui était différent dans css via Firebug sur Firefox. et ajouté ces styles à mon css.

Espérons que ça aide. Mag

Answer 3

Je luttais aussi avec ce problème. Je n'ai pas utilisé thématisation donc je n'ai pas eu cette importante propriété CSS:

position:absolute; 

J'ai ajouté à mon fichier CSS et tout fonctionne bien maintenant:

.ui-widget { position: absolute; } 

Answer 4

Si vous utilisez une balise d'ancrage comme ci-dessous pour déclencher le dialogue

<a href="#" onclick="$(#id).dialog('open');">open dialog</a> 

vous aurez envie d'ajouter un return false; à l'attribut onclick:

<a href="#" onclick="$(#id).dialog('open'); return false;">open dialog</a> 

Cela empêche le rechargement de la page d'ancrer #, ce qui le fait sauter directement au début.

Answer 5

J'ai eu ce problème parce que j'attribution d'une classe à la boîte de dialogue qui dans ma feuille de style se couchait:

position: relative; 

qui était Redéfinition de la:

position: absolute; 

nécessaire par la boîte de dialogue.

Fondamentalement, assurez-vous de la classe .ui-dialogue a:

position: absolute; 

et la fenêtre ne doit pas faire défiler vers le bas de la page et l'espace vertical supplémentaire ne sera pas ajouté au corps.

Answer 6

Comment je l'ai fixé:

HTML

<a href="javascript:openDialogFunction(parameters)">...</a> 

Javascript

function openDialogFunction(parameters) { 

    var topOff = $(window).scrollTop(); 

    //code to open the dialog 

    $(window).scrollTop(topOff); 
} 

Answer 7

J'ai eu la même question et voici comment je résolus. C'est similaire à la solution @bassim, mais avec un peu de saveur différente.

J'ai eu la même étiquette d'ancrage et utilisé « $ (# ancre élément) .cliquez (function() {..} Voici l'extrait de code -.

Dans jsp -

<a id="open-add-comments-${site}" class="open-add-comments" href="#" site-id="${site}" project-id="${project}" >Add comments</a><br/> 

javascript -..

$(".open-add-comments").click(function(){ 

    var projectId=$(this).attr("project-id"); 

    $("#add-comment-form").dialog({ 
     //width: "auto", 
     width: 800, 
     height: "auto", 
     position: "absolute", 
     maxWidth: 800, 
     minWidth: 300, 
     maxHeight: 400, 
     modal: true, 
     title: "Adding comment for \"${project.name}\" and site \""+siteName+"\" ", 
     open: function(event, ui) { 

     $("#add-comment fieldset textarea").html("").focus(); 
      ............ 
      ..... 
     }, 
     buttons: { 
      "Save": function() { 

      .... some business logic 

      }, 
      Cancel: function() { 
       $(this).dialog("close"); 

      } 
     } 

    }); 

    return false; // -- THIS IS IMPORTANT AND RESOLVED THE ISSUE 

}); 

ce fait l'affaire et résolu le problème Merci de repos dans cette page qui a donné de bons pointeurs et a aidé à résoudre le problème équipe Kudos

.

Answer 8

Une autre solution consiste à appeler un événement.preventDefault lorsque la boîte de dialogue est ouverte

$('#demo4').click(function() { 
    $("#tallContent").dialog("open"); 
    event.preventDefault(); 
});