8
votes

Repositionner JQuery Mobile Popup après changement de contenu

I` MM en utilisant JQuery Mobile (1.3.1) pour afficher une pop up (écran centré). Selon les actions de l'utilisateur, certains contenus sont insérés dans la fenêtre contextuelle via AJAX. Cela fonctionne bien, mais il y a un problème: Une fois que le contenu est injecté dans la fenêtre contextuelle, sa taille change, mais la position n'est pas mise à jour. Dès que la fenêtre est redimensionnée, la position contextuelle se rafraîchie, mais jusqu'à présent, je n'ai pas trouvé de moyen de déclencher cette action manuellement.

Déclaration de la popup: p>

$('#MoveFolderPopup').trigger("reposition");
$('#MoveFolderPopup').trigger("_reposition");
$('#MoveFolderPopup').trigger("_handleWindowResize");
$('#MoveFolderPopup').trigger('refresh')
$(window).trigger('resize');
$('#MoveFolderPopup').popup('open');
$('#MoveFolderPopup').trigger('updatelayout');

jquery mobile popup resize positioning

0 commentaires

3 Réponses :

0
votes

Cela fonctionne partiellement pour moi:

$('#MoveFolderPopup').resize();

0 commentaires

18
votes

$("#MoveFolderPopup").popup("reposition", {positionTo: 'window'});

1 commentaires

Merci, la deuxième déclaration a fait le travail :)

0
votes

J'ai eu un problème similaire alors que aucune des solutions fournies ici n'a fonctionné dans mon cas. La solution simple qui résolvait mon problème (et peut-être aussi la vôtre):

Fermer la popup li>
Ajout / remplacement du contenu à l'intérieur de la popup li>
Ouvrez la popup (peut être placé dans un délai d'attente en cas de fermeture de temps) LI> ol>
Cela va si vite que l'utilisateur ne réalisera pas que la popup était fermée et ouverte à nouveau. La taille de la popup est définie sur la base du nouveau contenu et non par le contenu précédent. P>
J'ai testé aussi sur des appareils mobiles avec Chrome, Firefox, Safari. P>
Si vous auriez / vouloir une pop up forte> en plein écran fort> avec changeant de contenu, vous pouvez mettre ce code dans la section .Ready dans la section. p>
p>
```
// Position fullscreen popup
$("#yourPopupBoxId").popup({
    beforeposition: function () {
        $(this).css({
            width: window.innerWidth,
            height: window.innerHeight,
            border: 'none',
            // Depending on content, otherwise ignore
            display: 'inline-table'
        });
    },
    x: 0,
    y: 0
});
```

0 commentaires