Bootstrap-Modal: Der Hintergrund springt beim Umschalten nach oben

110

Ich habe ein Problem mit einem Modal. Ich habe eine Schaltfläche auf einer Seite, die das Modal umschaltet. Wenn das Modal angezeigt wird, springt die Seite nach oben.

Ich habe alles getan, um eine Lösung zu finden, aber ich bin wirklich verloren.

BEARBEITEN:

Ich habe es auch mit versucht: $('#myModal').modal('show');aber es hat genau den gleichen Effekt.

javascript jquery css twitter-bootstrap twitter-bootstrap-3 FooBar
quelle
Hallo Benni. Ja, das bin ich trotzig. Ich habe es auch versucht mit: $ ('# myModal'). Modal ('show'); aber es hat genau den gleichen Effekt.
FooBar
1
kann diese Ihnen helfen, das gleiche Problem: stackoverflow.com/questions/12894570/...
Mark
@ Mark, siehe meine Antwort unten ...
Ravimallya
Mir ist aufgefallen, windowdass das Modal ausgelöst wird, wenn ich irgendwo darauf klicke. Das scheint seltsam und unerwartet. Ich habe die buttonvia devtools entfernt und durch Klicken auf eine beliebige Stelle auf der Seite wurde immer noch das modale Fenster geöffnet. War das gewünschtes Verhalten? Ich frage mich, ob Sie nicht den richtigen Selektor für das modale Klickereignis haben.
Dward

Antworten:

174

Wenn das Modal geöffnet wird, wird eine modal-openKlasse auf das <body>Tag gesetzt. Diese Klasse setzt overflow: hidden;auf den Körper. Fügen Sie diese Regel Ihrem Stylesheet hinzu, um den Stil bootstrap.css zu überschreiben:

body.modal-open {
    overflow: visible;
}

Jetzt sollte die Schriftrolle an Ort und Stelle bleiben.

pstenstrm
quelle
@pstenstrm, ich habe einen Zweifel. Sie haben gesagt, dass Sie das CSS für die .modal-open-Klasse überschreiben sollen. Aber was ist, wenn es zusätzliche schließende Divs gibt und ich in meiner Antwort keine Klassen in meiner Auflösung überschrieben habe? Es funktioniert gut, nachdem 2 zusätzliche Divs entfernt wurden. bs modal Hinzufügen von .modal-Backdrop Div, das verwirrt wird, wo es wegen zusätzlicher schließender Tags geschlossen werden musste.
Ravimallya
4
Funktioniert bei mir nicht, ich habe das Modal in einem Iframe und es scrollt nach oben ... irgendwelche Ideen?
Cabuxa.Mapache
5
Das hat es für mich behoben. Nur um die Wurzel meines Problems hinzuzufügen, war 'body {height: 100%}'.
PeteG
23
Ich arbeite nicht für mich. Ich habe ein Vanille-Modal, mit dem ich öffne, .modal('show')und es rollt immer noch zum Anfang der Seite. Bootstrap v3.2.0
MandM
6
Ich musste zu position: inheritdieser Klasse hinzufügen , arbeitete danach aber wie ein Zauber.
Adrian3martin
28

Wenn Sie modal mit Tag anrufen. Versuchen Sie, '#' aus dem href-Attribut zu entfernen. Rufen Sie modal mit Datenattributen auf.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
Gokhan
quelle
Ich öffne es genau so, wie Sie es dort gepostet haben. Überprüfen Sie heraus den Link
FooBar
5
Wenn Sie nicht die "<Button>" verwenden, sondern <a>, wie in meinem Fall, verlieren Sie das Symbol "Fingertaste", wenn Sie den Mauszeiger auf das Objekt bewegen. Um dies zu überwinden, habe ich Folgendes getan: ... href = "# mai_modal_id" data-toggle = "modal" ... und ich habe kein
Datenziel verwendet
3
@pagurix - Ihr Kommentar hat in meinem Szenario am besten funktioniert.
AlfredBr
Ich denke, @pagurix sollte seinen Kommentar als separate Antwort schreiben. Einzige Sache, die geholfen hat. Daumen hoch!
Vibhor Dube
13

Wenn Sie das Ankertag als verwenden <a href"#" ..> ... </a>und ein href="#"Problem erstellen, entfernen Sie dieses. Sie können mehr darüber lesen hier

Nimesh Jain
quelle
12 
$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

Dies wird Ihnen helfen, die Bildlaufleiste oben zu stoppen. Es hat bei mir funktioniert

Georgi Mirchev
quelle
5

Möglicherweise arbeiten Sie mit Modalen, die irgendwo im Code verschachtelt sind:

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

Für mich war es eine Kombination aus Position, Höhe und Überlauf.

Dennis Heiden
quelle
4

Ich sehe keinen bestimmten Fehler, aber ich würde Ihnen raten, Ihre HTML-Syntax zu überprüfen .

Ein kleiner Test mit Ihrer Quelle gibt mir Fehler wie

Zeile 127, Spalte 34: Nicht geschlossenes Element div.

              <div class="inner onlySides">

Dies könnte ein Problem sein.

BillyJoe
quelle
Vielen Dank - ich werde das untersuchen - auch wenn ich kaum glauben kann, dass dies das Problem auslösen könnte, das ich habe. Es sieht so aus, als würden Sie ein Plugin verwenden, um dies zu verfolgen - wenn ja; welche?
FooBar
Ich benutze kein Plugin außer Firebug. Es ist immer eine gute Sache, die Gültigkeit Ihrer Seite auf validator.w3.org zu überprüfen . Es wäre ein Problem, denn wenn Sie div nicht geschlossen haben, werden Sie seltsames Verhalten haben :)
BillyJoe
4

Der einfachste Weg, den springenden Hintergrund zu lösen, besteht darin, zwei Parameter zu definieren:

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}
Nils
quelle
3

Ich habe versucht, dieses Problem auf meinem lokalen Host zu replizieren, und so seltsam es auch scheinen mag, es liegt ein Konflikt mit der von Ihnen verwendeten Bootstrap JS-Datei vor.

Versuchen Sie, Ihren Code zu kommentieren:

<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>

Verwenden Sie stattdessen Bootstrap 2.3.2:

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

Das hat es für mich funktionieren lassen.

Ich habe es mit Bootstrap Version 3 versucht, aber das hat nicht funktioniert. Ich kann den Problemteil immer noch nicht genau bestimmen, aber irgendwo in Firebug ist mir ein e.preventDefault() is not a functionFehler aufgetreten. Ich vermute, dass dies die Hauptursache sein sollte, aber ich muss ihn noch mit den anderen JS-Dateien vergleichen.

AyB
quelle
3

Ich habe versucht, .modal oben in die Mitte des Bildschirms zu setzen. 

.modal {
    position: absolute;
    top: 50%;
}

Nur meine 2 Cent Gedanken.

Holger Thiebosch
quelle
Nahe genug. Ich werde nicht abstimmen, weil mein Problem möglicherweise anderswo liegt, aber dies führte dazu, dass die untere Hälfte des Bildschirms abgeblendet wurde, aber das Modal in Richtung Mitte positioniert war.
Crafter
3

In Bootstrap 3.1.1 habe ich mit folgender Lösung gelöst:

body.modal-open {
    position: absolute !important;
}
Filo
quelle
2
Du hast meinen Tag gerettet @Filo Vielen Dank
vinothini
2

Sie haben 2 zusätzliche schließende divTags kurz vor <div id="footer">oder nach dem <div id="mainFrame" class="group">div. Ich benutze Visual Studio 2012 Express, um dies zu überprüfen.

Bitte entfernen Sie diese 2 zusätzlichen Divs und lassen Sie uns wissen, wie es funktioniert. Ich habe zusätzliche Divs entfernt und alle benutzerdefinierten Skripte entfernt. nur jquery core und bootstrap in der footer beibehalten. Hier ist der Screenshot der endgültigen Ausgabe. Hier ist der JSBIN-Spielplatz für Sie, der gut funktioniert.

Ich empfehle Ihnen, headjs zu verwenden, um alle Skripte und CSS-Dateien zu laden. Es ist auch keine gute Praxis, Skripte zweimal zu laden.

Geben Sie hier die Bildbeschreibung ein

Ravimallya
quelle
4
herabgestufte Antworten erfordern angemessene Kommentare mit Gründen.
Ravimallya
2

Versuchen Sie dies, um Modal zu öffnen und zu sehen, was passiert:

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>
Rollerlord
quelle
2 
body.modal-open {
overflow: visible !important;
}

Ich brauchte das wichtige Attribut, um es zu beheben

Schwindel
quelle
Dies funktionierte für mich und ich hatte das Problem von @ MandM (in den Kommentaren) aus der Antwort von pstenstrm: "Funktioniert nicht für mich. Ich habe ein Vanille-Modal, das ich mit .modal ('show') öffne, und es scrollt immer noch zum Anfang der Seite. Bootstrap v3.2.0 ". Der einzige seltsame Effekt ist, dass jetzt der Hintergrund gescrollt wird, wenn Sie weiter durch ein Modal scrollen, das größer als das Fenster ist, aber dies ist ein kleines Problem für mich. Vielen Dank.
Dgig
1

Ich hatte das gleiche Problem mit Bootstrap 2.3.2

Es war ein Problem beim Klicken auf einen Link:

Der Trick war: return false;

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

und die js:

function openModal() {
    $('#myModal').modal('show');
}
mpccolorado
quelle
1

Ich habe Stunden damit verbracht, alles hier und anderswo auszuprobieren. Es stellte sich heraus, dass ich für die Verwendung von AngularJS-Material die Animation auf dem Konfigurationsobjekt arg uibModal.open deaktivieren musste.

Beispielsweise:

  $uibModal.open(
    {
      animation: false,
      component: 'myDialogComponent',
      size: 'lg',
      resolve: {
        details: function() {
          return detailsCollection;
        }
      }
    }
  );

Hoffe das hilft jemand anderem.

Nathan Beach
quelle
1

Wenn Sie in einem Angular-Programm auf dieses Problem stoßen, fügen Sie den folgenden Code in die erste Zeile der .scss-Datei ein.

::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}
Sibashankar Panda
quelle
0

Ich hatte das gleiche Problem und ich denke, ich finde es heraus. Sie müssen nur den modalen HTML-Code als direktes untergeordnetes Element des Body-Tags platzieren ! Sie können den HTML-Code für die Schaltfläche, die das Modal auslöst, an einer beliebigen Stelle platzieren. Ich glaube, dies vermeidet CSS-Vererbungs- und Positionsprobleme, die dieses Problem auslösen.

Beispiel:

<body>
    <!-- All your other HTML code -->
    <div>
        <!-- Button trigger modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</body>
Nunoarruda
quelle
0

Endlich herausgefunden. Wickeln Sie die Schaltfläche, die auf das Modal abzielt, NICHT in ein Ankertag.

Schlecht

<a href"#">
    <button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>

Gut

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>
ALF-Maschine
quelle
0

Dieser hat es für mich getan

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
Warkitty
quelle
Ich hatte ein ähnliches Problem mit dem Springen der Navigationsleiste und des Containers, als das Modal geöffnet wurde. Das habe ich gesucht.
Awhitey98
Ich bin froh, dass es geholfen hat!
Warkitty
0

Nachdem ich über mehrere Stunden Dutzende Antworten gelesen hatte, kopierte ich den Originalcode erneut aus der Bootstrap-Datei und debuggte Schritt für Schritt, um zu sehen, warum ich immer nach oben springe. Weil die aktuellste Version von Bootstrap 3 das Modal an der Position anzeigt, an der Sie sich gerade befinden. Ich hatte das herausgefunden -webkit-transform: translate3d(0,0,0);und height: 100%in meinem CSS-Body-Tag dieses Verhalten verursacht. Vielleicht hilft das jemandem.

AlexioVay
quelle
0

Für mich funktioniert, wenn ich die Version von 3.1.1 auf 3.3.7 geändert habe

Wenn Sie Version 3.3.1 nicht verwenden müssen, versuchen Sie es zu ersetzen.

Nach der Änderung sollten Sie überprüfen, ob der Rest der Funktion ordnungsgemäß funktioniert.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Pyot
quelle
0

body.modal-open { position: inherit; }

Das hat für mich wie ein Zauber gewirkt.

Nimish Goel
quelle
0

Ich habe alle oben genannten Beispiele ausprobiert - dies ist das einzige, was für mich funktioniert hat:

.modal-open {

            padding-right: 0 !important;

        }

Entfernen der Polsterung von der rechten Seite des Modells - verhindert den Sprung.

Stnfordly
quelle
0

Höhe: 100% ist Problem zu lösen, aber Sie müssen korrekte "div" hinzufügen

Anar Ali
quelle
0

Ich habe das gleiche Problem und keine der Antworten hat mir geholfen. Ich habe eine Problemumgehung gefunden, die dumm aussieht, aber zumindest in meinem Fall funktioniert.

Ich habe festgestellt, dass die Seite nur einmal nach oben gescrollt wird und danach die nächsten geöffneten Modalitäten wie erwartet funktionieren. Dann habe ich festgestellt, dass das Verstecken eines Elements im DOM dieselbe seltsame Schriftrolle auslöst. Also habe ich nach dem Laden der Seite nur ein Dummy-Div erstellt, als es auszublenden und zu entfernen, und das hat das Problem gelöst.

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
Borzilo Andrey
quelle
0

Ich stand vor dem gleichen Problem. Das Problem war, dass ich HTML- und Body-Elementen die Klasse .modal-open hinzufügte. Fügen Sie diese Klasse einfach dem Körper hinzu und alles funktioniert wie erwartet.

general666
quelle
-1

Versuchen Sie dies, es funktioniert perfekt

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}
minimieren
quelle
-3

Wenn die Antwort von pstenstrm bei Ihnen nicht funktioniert, kombinieren Sie sie mit diesem HTML-Ersatzknopf:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

Dadurch sollte die Schaltfläche auf dem Bildschirm angezeigt werden.

Ben
quelle