Dev Faq
9
votes

DRAGGABLE JS BOOTSTRAP MODAL - Problèmes de performance

Pour un projet au travail, nous utilisons des fenêtres modales de bootstrap à JavaScript. Nous aimerions faire partie des fenêtres mobiles, mais nous courons dans des problèmes de performance avec jQuery. 

$("#myModal").draggable({
    handle: ".modal-header"
});
  • est la lente performance la faute du navigateur, jQuery, bootstrap ou est mon code non optimal? Li>
  • Pourquoi y a-t-il une différence entre le glissement horizontal et vertical? LI>
  • Devrais-je trouver une solution de contournement ou simplement éviter de bottestrap pour des popups dynamiques? LI> ul>

    Cordialement, Guido p> p>

1 commentaires

J'ai le même problème. D'une manière ou d'une autre sur Twitter, ils ont réussi à le faire fonctionner (le modal lorsque vous cliquez sur un utilisateur). À propos de votre 3ème question, j'ai essayé d'utiliser JQuery Ui Bootstrap, qui est une sorte de combo des deux qui ne devrait pas entrer en conflit, mais c'était trop de travail alors j'ai décidé d'abandonner et de coller avec JQuery UI.

6 Réponses :

2
votes

Cela ne répond pas exactement à vos questions, mais vous pouvez essayer de désactiver les propriétés * - transition ou diminuer la valeur de l'heure à partir du 0.3s spécifié . Ceci est défini dans .Modal.fade . Mais cela gâchera également l'animation de pop-up initiale. Si ce n'est pas acceptable, vous pouvez utiliser l'événement Démarrer du widget draggable pour appliquer le nouveau style.

0 commentaires
11
votes

J'ai trouvé quelques façons de résoudre ce problème.

Ajout de cela à votre fichier CSS désactivera les effets code> transition code> tandis que le modal est en cours de glisser. Il apparaît toutefois qu'une fois que l'utilisateur fait glisser la case, la volée ne se produira pas correctement, mais elle ne s'effacera pas correctement. P> 

.modal.fade.nofly {
    top: 10%;        
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}

0 commentaires
5
votes

J'ai trouvé que chez Bootstrap 3, je devais remplacer ces propriétés CSS de la boîte de dialogue modale: xxx

violon

Démo plein écran

1 commentaires

C'était la solution appropriée pour moi aussi. Mon seul problème maintenant, c'est que le modal est situé sur le côté gauche, au lieu de centré.

0
votes

Je préfère utiliser jqueryui. Plus de détails sur API Draggable ici: http://api.jqueryui.com/draggable/

0 commentaires
1
votes

avec bootstrap 3.3 et jQuery ui 1.1 Je ajoute une classe appelée "modale-dragagable" à l'élément avec la classe "modale".

Il se lie à la boîte de dialogue .Modal Elément à l'intérieur des conteneurs avec la classe .Modal-draggable (Contrairement à certains exemples ici qui se lient au conteneur réel).

Il y a quelque chose de CSS alors défilement pour les dialogues longs fonctionnent toujours sur des appareils. de toutes les tailles d'écran.

css: xxx

javascript: xxx

Voir Le JS Fiddle ici pour une démonstration: http://jsfiddle.net/jcosnn6u/3/

NB: Jusqu'à présent, je n'ai testé que cela dans des appareils Chrome, Firefox et Safari et mobiles, je ne peux donc pas commenter la compatibilité Internet Explorer.

1 commentaires

Ceux qui ne peuvent pas faire fonctionner avec cela, n'oubliez pas d'inclure