wake-up-neo.com

Bootstrap-Modal: Der Hintergrund springt beim Umschalten an die Spitze

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

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

BEARBEITEN:

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

javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3
91
FooBar

Beim Öffnen des Modals wird eine modal-open-Klasse auf das <body>-Tag gesetzt. Diese Klasse setzt overflow: hidden; für den Körper. Fügen Sie diese Regel zu Ihrem Stylesheet hinzu, um den Bootstrap.css-Stil zu überschreiben:

body.modal-open {
    overflow: visible;
}

Jetzt sollte die Rolle an ihrem Platz bleiben.

153
pstenstrm

Wenn Sie Modal mit Tag aufrufen. Versuchen Sie, '#' aus dem Attribut 'href' zu entfernen. Modal mit Datenattributen aufrufen.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
24
Gokhan
$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

Dies hilft Ihnen dabei, die Bildlaufleiste oben anzuhalten 

9
Georgi Mirchev

wenn Sie das Ankertag als <a href"#" ..> ... </a> verwenden und href="#" ein Problem verursacht, entfernen Sie das . Sie können mehr über hier

5
Nimesh Jain

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.

4
Dennis Heiden

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

Ein kleiner Test mit Ihrer Quelle gibt mir Fehler 

Zeile 127, Spalte 34: Nicht geschlossenes Element div.

              <div class="inner onlySides">

Dies könnte ein Problem sein.

4
billyJoe

Ich habe versucht, dieses Problem auf meinem localhost zu replizieren. So seltsam es auch erscheinen mag, es gibt einen Konflikt mit der von Ihnen verwendeten Bootstrap-JS-Datei.

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 für mich funktioniert.

Ich habe es mit Bootstrap Version 3 ausprobiert, aber das hat nicht funktioniert. Ich bin immer noch nicht in der Lage, das Problem herauszufinden, aber irgendwo entlang von Firebug warf ich einen e.preventDefault() is not a function-Fehler.

3
I Can Has Kittenz

Ich habe versucht, .modal oben in der Mitte des Bildschirms zu platzieren. 

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

Nur meine zwei Cent Gedanken. 

3
Holger Thiebosch

sie haben zwei zusätzliche div-Tags unmittelbar vor dem <div id="footer"> oder nach dem <div id="mainFrame" class="group"> div. Ich überprüfe dies mit Visual Studio 2012 Express.

Bitte entfernen Sie diese 2 zusätzlichen Divs und lassen Sie uns wissen, wie es funktioniert. Ich entfernte zusätzliche Divs und entfernte alle benutzerdefinierten Skripts. behielt nur Jquery-Kern und Bootstrap in der Fußzeile. Hier ist der Screenshot der endgültigen Ausgabe. hier ist der Jsbin-Spielplatz für dich, der gut funktioniert. 

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

enter image description here

2
Ravimallya
body.modal-open {
overflow: visible !important;
}

Ich brauchte das wichtige Attribut, um es zu beheben

2
Dizzle

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

body.modal-open {
    position: absolute !important;
}
2
Filo

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

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>
2
scooterlord

body.modal-open { position: inherit; }

Das funktionierte für mich wie ein Zauber. 

0
Nimish goel

Ich hatte das gleiche Problem und ich glaube, ich finde es heraus. Sie müssen nur das modale HTML als direktes untergeordnetes Element des body-Tags einfügen ! Sie können den HTML-Code für die Schaltfläche platzieren, der das Modal zwar auslöst, wo Sie es benötigen. Ich glaube, das 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>
0
nunoarruda

Dieser hat es für mich getan

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
0
warkitty

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');
}
0
mpccolorado

Schließlich habe ich herausgefunden, dass dies nicht der Fall ist.

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>
0
ALFmachine

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

.modal-open {

            padding-right: 0 !important;

        }

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

0
Stnfordly

Nachdem ich Dutzende Antworten über mehrere Stunden gelesen hatte, kopierte ich den ursprünglichen Code erneut aus der Bootstrap-Datei und debugierte Schritt für Schritt, um zu sehen, warum ich immer nach oben springe. Die aktuellste Version von Bootstrap 3 zeigt den Modal an der Position, an der Sie sich gerade befinden. Ich hatte herausgefunden, dass -webkit-transform: translate3d(0,0,0); und height: 100% in meinem css-body-tag dieses Verhalten verursacht haben. Vielleicht hilft das jemandem.

0
AlexioVay

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

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

Nach der Änderung ist es sinnvoll, check zu überprüfen, dass 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>
0
Pyot

Ich hatte das gleiche Problem. Das Problem war, dass ich HTML- und Body-Elementen eine .modal-open-Klasse hinzufügte. Fügen Sie einfach diese Klasse zu body hinzu und alles funktioniert wie erwartet.

0
general666

höhe: 100% ist ein Problem, aber Sie müssen das richtige "div" hinzufügen 

0
Anar Ali

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

Ich habe festgestellt, dass die Seite nur einmal nach oben gescrollt wird. Danach funktionieren die nächsten geöffneten Modale wie erwartet. Dann fand ich heraus, dass das Verstecken eines beliebigen Elements im DOM dieselbe seltsame Rolle auslöst. Ich habe also einfach ein Dummy-Div nach dem Laden der Seite erstellt, anstatt es zu verstecken und zu entfernen, und das Problem wurde gelöst.

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

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

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

Ich habe Stunden damit verbracht, alles hier und anderswo auszuprobieren. Es stellte sich heraus, dass ich für die Verwendung von "eckjs" -Material die Animation des Konfigurationsobjekts "uibModal.open" deaktivieren musste. 

Zum Beispiel:

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

Hoffe das hilft jemand anderem.

0
Nathan Beach