Ziehbar JS-Bootstrap-modal - performance-Probleme

Für ein Projekt bei der Arbeit verwenden wir Bootstrap-Modal-Fenster, in JavaScript. Wir würden gerne einige der windows-beweglichen, sondern läuft in performance-Probleme mit JQuery.

$("#myModal").draggable({
    handle: ".modal-header"
});

Beispiel ,

Quelle .

Im IE9 funktioniert es wie erwartet.

In Chrom, horizontale Bewegung funktioniert wie erwartet, und die vertikale ziehen ist eher langsam, aber nicht problematisch.

In Firefox, horizontales ziehen wie erwartet funktioniert, aber die vertikale ziehen ist extrem langsam.

Es ist seltsam, weil die Beispiel-Fenster ist nicht grafisch schwer und JQuery soll zu normalisieren browser-Verhalten. Ich habe versucht dies zu lösen, ohne Verwendung von JQuery draggable, aber ich lief in das gleiche Problem.

So, ich habe ein paar Fragen:

  • Ist die langsame Leistung die Schuld der browser, JQuery, Bootstrap oder ist mein code nicht optimal ist?
  • Warum gibt es einen Unterschied zwischen horizontalen und vertikalen ziehen?
  • Sollte ich einen workaround finden, oder einfach nur vermeiden, Bootstrap zusammen für dynamische popups?

Freundlichen GRÜßEN,
Guido

  • Ich bin mit dem gleichen Problem. Irgendwie bei Twitter haben Sie es geschafft es zum laufen zu bringen (der modal-wenn Sie auf einen Benutzer). Zu deiner 3. Frage, ich habe versucht, jQuery-UI, Bootstrap, das ist eine Art Kombination aus beiden, die sollten nicht Konflikt, aber es war zu viel Arbeit, also beschloss ich, geben Sie sich und bleiben mit jQuery UI.
InformationsquelleAutor Jodiug | 2013-04-08
  1. 11

    Fand ich ein paar Möglichkeiten, um dieses Problem zu beheben.

    Hinzufügen dieser zu Ihrer CSS-Datei deaktiviert werden, die transition Effekte, während der modal gezogen wird. Es scheint jedoch, dass, sobald der Benutzer das Feld der Fliegen wird nicht korrekt erfolgt, sondern es wird nur verblassen.

    .modal.fade.ui-draggable-dragging {
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    transition: none;
}

    Alternativ können Sie die folgenden CSS-Datei und die nofly - Klasse, um Ihr Modell zu deaktivieren, die Fliegen alle zusammen aber nicht die fade-in:

    .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;
}
    InformationsquelleAutor bbodenmiller
  2. 5

    Fand ich, dass auf bootstrap 3, die ich hatte, diese zu überschreiben css-Eigenschaften des modal-dialog:

    .modal
{
    overflow: hidden;
    bottom: auto;
    right: auto;
}
.modal-dialog{
    margin-right: 0;
    margin-left: 0;
}

    Fiddle

    Full-screen-demo

    • Dies war die richtige Lösung auch für mich. Nur mein Problem nun ist, dass der modal ist Platz auf der linken Seite, statt zentriert.
    InformationsquelleAutor David Wilton
  3. 2

    Dies nicht genau deine Fragen beantworten, aber Sie können versuchen, deaktivieren Sie die *-transition Eigenschaften oder die Verringerung der Zeit, die Werte aus der angegebenen 0.3s. Dieser ist definiert in .modal.fade. Aber dieses Durcheinander wird mit den ersten pop-up-animation zu. Wenn dies nicht akzeptabel ist, können Sie die start Veranstaltung der draggable widget auf anwenden, um die neuen Stil.

    InformationsquelleAutor lunr
  4. 1

    Mit Bootstrap 3.3 und jQuery UI 1.1 ich bin das hinzufügen einer Klasse "modal-ziehbar", um das element mit der "modal" - Klasse.

    Es bindet an die .modal-dialog element in den Container mit der .modal-draggable Klasse (im Gegensatz zu hier einige Beispiele, die Bindung an die tatsächlichen container).

    Gibt es einige CSS so Bildlauf für lange Dialoge, noch die Arbeit über die Geräte aller Bildschirmgrößen.

    CSS:

    .modal-draggable .modal-backdrop {
  position: fixed;
}

.modal.modal-draggable {
    overflow: overflow-y;
}

.modal-draggable .modal-header:hover {
  cursor: move;
}

    JavaScript:

    $(".modal-draggable .modal-dialog").draggable({
  handle: ".modal-header"
});

    Sehen, die JS Fiddle hier für eine demo:
    http://jsfiddle.net/jcosnn6u/3/

    NB: bisher habe ich nur getestet in Chrome, Firefox und Safari sowie mit mobilen Geräten, also kann nicht kommentieren, die Kompatibilität mit Internet Explorer.

    • Diejenigen, die es nicht schaffen, mit diesem arbeiten, bitte denken Sie daran, in <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>. Es funktioniert für mich.
    InformationsquelleAutor Iain Collins
  5. 0

    Bevorzuge ich mit jqueryui. Mehr Details über ziehbar API hier: http://api.jqueryui.com/draggable/

    InformationsquelleAutor luongnv89
  6. 0

    Obwohl die vorgeschlagene CSS-änderungen, die für mich gearbeitet, ich wusste nicht, wie der dialog wird auf der linken Seite angezeigt zunächst. Aktualisieren jquery-UI 1.9 bis 1.11 wurde das Problem behoben, ich sah

    InformationsquelleAutor Doogal
Schreibe einen Kommentar