Twitter Bootstrap Modal scrollen Sie die Seite bis auf der Messe

Klick auf einen link löst eine Twitter-Bootstrap-Modal-pop-up verursacht den browser zu scrollen, bis die Seite. Dieses Verhalten erst Auftritt in Chrom.

Hier ist eine demonstrations-Seite:

http://www.turizmburosu.com/test2.aspx

Die Seite hat 600 Zeilen von links, wodurch die Seite Körper zu überschreiten, Fenster-Höhe. Wenn einer dieser links angeklickt wird, zeigt den modalen dialog. Wenn in Chrome, klicken auf die links unten, die erste Ansicht wird verursachen, dass der hintergrund der Seite nach oben scrollen (nicht immer ganz an der Spitze).

Ich bin verwenden Sie die folgende Funktion auslösen, die die Anzeige des Modal:

function test(id, imp) {
    $("#modalLabel").html("Header");
    $("#modalBody").html("Body");
    $("#myModal").modal("show");
}

und die links sind von der form:

<a href="" onclick="test();return false;">Test Link ###</a>

Sehe ich dieses Verhalten in Chrome 22.0.1229.94 m.

Irgendwelche Vorschläge/Ideen, warum dies geschieht und wie es zu verhindern?

Weiteres Beispiel

Diese können neu erstellt werden, auf der Twitter Bootstrap-Dokumentation-Seite für das plugin Modal.

Einmal auf der Seite, einfach das überschreiben der vorhandenen Daten-api verwenden der JavaScript-api statt:

$('#modals a[data-toggle="modal"]').on('click',
  function(e) {
    $('#myModal').modal('toggle');
    return false
  });

Nun, wenn die Launch Demo Modal Schaltfläche geklickt wird, wird die Seite nach oben scrollen, wenn das modal angezeigt wird.

Wieder, diese ist mit Chrom.

InformationsquelleAutor der Frage Lexicon | 2012-10-15

  1. 18

    Behoben (10/29/2012)

    Dieses Problem wurde behoben, da Bootstrap v2.2.0. Sehen commit e24b46... für details.

    (original-Antwort)

    Dies ist aufgrund eines Fehlers in der Implementierung des Twitter-Bootstrap-Modal (2.1.1). Die Wurzel des Problems ist, dass der Fokus auf den modal vor zum Abschluss seiner übergang. Dies wird nur auftreten, unter der Bedingung, dass

    1. der browser unterstützt CSS-transitions (und Sie sind mit bootstrap-transition.js);
    2. die modal hat die Klasse fade; und
    3. wenn der Fokus eingestellt ist, um ein element außerhalb der aktuellen Ansicht, der browser scrollen, um es zu verschieben in den Blick (z.B. Chrome, Safari).

    Es sollte beachtet werden, dies betrifft sowohl die Daten-API (HTML-basiert) und der Programmierschnittstellen (API (JS-basiert). Jedoch, der Grund, es ist mehr bemerkbar, wenn man die programmatischen Ansatz, denn anders als die Daten-API, ist es nicht automatisch wieder den Fokus auf das auslösende element ist, und somit nicht Blättern der Blick zurück nach unten, wenn das modal wird ausgeblendet.

    Weitere Infos auf dem Twitter Bootstrap repo unter Ausgabe #5336: Modal Scrolls Hintergrund Inhalt.

    Wurde ein fix eingebunden in die 2.1.2-wip - Zweigdas sollte bis zum release jeden Tag jetzt.

    Hier ist eine demo mit dem patch bootstrap-modal.js:

    JSFiddle

    InformationsquelleAutor der Antwort merv

  2. 5

    Gleiche problem. Es wird verursacht durch "#" und der Anker ist zu tun, um zu scrollen.
    Ich fest, dass durch das löschen der Anker-tag und Ort:

    <span onclick="$('#umisteni_modal').modal('show');" style="cursor:pointer;">Změnit místo dodání</span>

    InformationsquelleAutor der Antwort Ales

  3. 1

    Ich hatte ein ähnliches Problem auf meiner Website, die verursacht wurde durch ein anderes jquery-plugin (sidr).
    Wenn die sidebar vorhanden war, und ich öffnete ein modales Fenster auf, ich würde an wieder nach oben.

    In jquery.sidr.js I changed line 102-106 aus:

    //Prepare page if container is body
if($body.is('body')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}

    :

    //Prepare page if container is body
if($body.is('body') && !$('#modal').hasClass('in')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}

    Wenn Sie dieses plugin zusammen mit twitter bootstrap modal, vielleicht kann dies dir helfen.

    InformationsquelleAutor der Antwort thephper

  4. 0

    Ich hatte das gleiche problem, weil diese Zeilen CSS, die waren gedacht, um permanent die Anzeige von Bildlaufleisten im browser. Das entfernen der beiden Zeilen das problem gelöst:

    html,
body {
    min-height: 100%;
    height: 101%;
}

    InformationsquelleAutor der Antwort Yana Okkulata

  5. 0

    bringen Sie den Fokus wieder zurück auf die enge

    var triggerOffset=0;
$('.modal').on('show.bs.modal', function() {
    triggerOffset=$(window).scrollTop();
});
$('.modal').on('hidden.bs.modal', function() {
     var animationTime=1;
    $('html, body').animate({
        scrollTop: (triggerOffset)
    }, animationTime);
});

    InformationsquelleAutor der Antwort ShAkKiR

  6. 0

    Ich war mit diesem Problem für so lange, aber meine Lösung war das entfernen der href aus dem anchor-tag

    d.h. 

    <a onclick="test();return false;">Test Link ###</a>

    Bekomme ich keine springen jetzt

    Hoffe, das hilft jemand in der Zukunft

    InformationsquelleAutor der Antwort Celeste

Schreibe einen Kommentar