Tryb Bootstrap: tło przeskakuje na górę po przełączeniu

111

Mam problem z modalem. Mam przycisk na stronie, który przełącza tryb. Kiedy pojawi się modal, strona przeskakuje na górę.

Zrobiłem wszystko, co mogłem, aby znaleźć rozwiązanie / itp., Ale jestem naprawdę zagubiony.

EDYTOWAĆ:

Próbowałem też z: $('#myModal').modal('show');ale ma dokładnie ten sam efekt.

javascript jquery css twitter-bootstrap twitter-bootstrap-3 FooBar
źródło
Cześć Benni. Tak, zdecydowanie jestem. Próbowałem również z: $ ('# myModal'). Modal ('show'); ale ma dokładnie ten sam efekt.
FooBar
1
czy to może ci pomóc, ten sam problem: stackoverflow.com/questions/12894570/…
Mark
@Mark, zobacz moją odpowiedź poniżej ...
Ravimallya,
Zauważyłem, że jeśli kliknę w dowolnym miejscu window, modal odpala. To wydaje się dziwne i nieoczekiwane. Usunąłem buttonpoprzez DevTools, a kliknięcie w dowolnym miejscu na stronie nadal otworzył okno modalne. Czy to pożądane zachowanie? Zastanawiam się, czy nie masz odpowiedniego selektora dla zdarzenia kliknięcia modalnego.
dward

Odpowiedzi:

174

Kiedy modal otwiera się, modal-openklasa jest ustawiana na <body>tag. Ta klasa ustawia overflow: hidden;się na ciało. Dodaj tę regułę do swojego arkusza stylów, aby zastąpić styl bootstrap.css:

body.modal-open {
    overflow: visible;
}

Teraz zwój powinien pozostać na swoim miejscu.

pstenstrm
źródło
@pstenstrm, mam wątpliwości. kazałeś nadpisać css dla klasy .modal-open. Ale co, jeśli są dodatkowe zamykające elementy div, aw mojej odpowiedzi nie zastąpiłem żadnych klas w mojej rozdzielczości? Działa dobrze po usunięciu 2 dodatkowych elementów div. bs dodając element div .modal-backdrop, który będzie mylony tam, gdzie musiał zostać zamknięty z powodu dodatkowych tagów zamykających.
Ravimallya
4
U mnie nie działa, mam modal wewnątrz iframe i przewija się do góry ... jakieś pomysły?
Cabuxa.Mapache
5
To naprawiło to dla mnie. Dodam tylko, że źródłem mojego problemu było „body {height: 100%}”.
PeteG,
23
Nie działa dla mnie. Mam modal waniliowy, za pomocą którego otwieram .modal('show')i nadal przewija się na górę strony. Bootstrap v3.2.0
MandM
6
Musiałem dodać coś do position: inherittej klasy, ale potem działałem jak urok.
adrian3martin
28

Jeśli dzwonisz modal z tagiem. Spróbuj usunąć '#' z atrybutu href i wywołaj modalne z atrybutami danych.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
Gokhan
źródło
Otwieram go dokładnie tak, jak tam zamieściłeś. Sprawdź link
FooBar,
5
jeśli nie użyjesz "<button>" ale <a>, jak w moim przypadku, tracisz ikonę "przycisk palca", gdy najedziesz kursorem myszy na obiekt. Aby to przezwyciężyć, zrobiłem to: ... href = "# mai_modal_id" data-toggle = "modal" ... i nie użyłem data-target
pagurix
3
@pagurix - Twój komentarz sprawdził się najlepiej w moim scenariuszu.
AlfredBr
Myślę, że @pagurix powinien napisać swój komentarz jako osobną odpowiedź. Jedyna rzecz, która pomogła. Kciuki w górę!
Vibhor Dube
14

jeśli używasz tagu kotwicy jako <a href"#" ..> ... </a>i href="#"tworzy problem, usuń go. Możesz przeczytać więcej tutaj

Nimesh Jain
źródło
12 
$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

Pomoże ci to zatrzymać przesuwający się pasek przewijania na górze

Georgi Mirchev
źródło
5

Prawdopodobnie działa z modalami zagnieżdżonymi gdzieś w kodzie:

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

Dla mnie było to połączenie pozycji, wysokości i przepełnienia.

Dennis Heiden
źródło
4

Nie widzę konkretnego błędu, ale radziłbym sprawdzić składnię html .

Mały test z twoim źródłem daje mi błędy takie jak

Wiersz 127, kolumna 34: niezamknięty element div.

              <div class="inner onlySides">

To może być problem.

billyJoe
źródło
Dziękuję - przyjrzę się temu - mimo że trudno mi uwierzyć, że może to spowodować wystąpienie problemu. Wygląda na to, że używasz wtyczki do śledzenia tego - jeśli tak; który?
FooBar
nie używam wtyczki z wyjątkiem firebuga. Zawsze dobrze jest sprawdzić ważność swojej strony na validator.w3.org . Byłoby problemu, bo jeśli masz niezamkniętych div, trzeba będzie dziwne zachowanie :)
billyJoe
4

Najłatwiejszym sposobem rozwiązania tła skoków jest zdefiniowanie dwóch parametrów:

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}
Nils
źródło
3

Próbowałem odtworzyć ten problem na moim hoście lokalnym i choć może się to wydawać dziwne, występuje konflikt z plikiem Bootstrap JS, którego używasz.

Spróbuj skomentować swój kod:

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

Zamiast tego użyj Bootstrap 2.3.2:

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

To sprawiło, że dla mnie zadziałało.

Wypróbowałem to z Bootstrap w wersji 3, ale to nie zadziałało. Nadal nie jestem w stanie wskazać części e.preventDefault() is not a functionpowodującej problem, ale gdzieś po tym Firebug wyrzucił mi błąd - przypuszczam, że to powinno być główną przyczyną, ale jeszcze nie porównałem tego z innymi plikami JS.

AyB
źródło
3

Próbowałem ustawić .modal top na środku ekranu. 

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

Tylko moje 2 centy myśli.

Holger Thiebosch
źródło
Wystarczająco blisko. Nie będę głosował przeciw, ponieważ mój problem może być gdzie indziej, ale spowodowało to przyciemnienie dolnej połowy ekranu, ale modal był ustawiony w kierunku środka.
crafter
3

W bootstrap 3.1.1 rozwiązałem tym rozwiązaniem:

body.modal-open {
    position: absolute !important;
}
Filo
źródło
2
Uratowałeś mi dzień @Filo Dziękuję bardzo
vinothini,
2

masz 2 dodatkowe divznaczniki zamykające tuż przed <div id="footer">lub po <div id="mainFrame" class="group">elemencie div. Używam programu Visual Studio 2012 Express, aby to sprawdzić.

Usuń te 2 dodatkowe elementy div i daj nam znać, jak to działa. Usunąłem dodatkowe elementy div i wszystkie niestandardowe skrypty. zachował tylko rdzeń jquery i bootstrap w stopce. tutaj jest zrzut ekranu końcowego wyniku. oto plac zabaw jsbin, który działa dobrze.

Proponuję użyć headjs do załadowania wszystkich skryptów i plików css. również nie jest dobrą praktyką dwukrotne ładowanie jakichkolwiek skryptów.

wprowadź opis obrazu tutaj

Ravimallya
źródło
4
odpowiedzi odrzucone wymagają odpowiednich komentarzy z uzasadnieniem.
Ravimallya
2

Spróbuj użyć tego, aby otworzyć modalne i zobaczyć, co się stanie:

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>
scooterlord
źródło
2 
body.modal-open {
overflow: visible !important;
}

Potrzebowałem ważnego atrybutu, aby to naprawić

Dizzle
źródło
To zadziałało dla mnie i miałem problem @ MandM (w komentarzach) z odpowiedzi pstenstrm: „Nie działa dla mnie. Mam modal waniliowy, który otwieram za pomocą .modal ('show') i nadal się przewija na górę strony. Bootstrap v3.2.0 ". Jedynym dziwnym efektem jest to, że teraz tło będzie się przewijać, jeśli będziesz przewijać modal wyższy niż okno, ale dla mnie jest to drobny problem. Dzięki.
dgig
1

Miałem ten sam problem, używając Bootstrap 2.3.2

Problem z kliknięciem linku:

Sztuczka była taka: powrót fałszywy;

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

i js:

function openModal() {
    $('#myModal').modal('show');
}
mpccolorado
źródło
1

Spędziłem nad tym wiele godzin próbując wszystkiego tutaj i gdzie indziej. W przypadku użycia angularjs-material okazało się, że musiałem wyłączyć animację w argumencie konfiguracyjnym obiektu uibModal.open.

Na przykład:

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

Mam nadzieję, że to pomoże komuś innemu.

Nathan Beach
źródło
1

Jeśli napotykasz ten problem w programie Angular, dodaj poniższy kod w pierwszym wierszu pliku .scss.

::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}
sibashankar panda
źródło
0

Miałem ten sam problem i myślę, że go rozgryzam. Musisz tylko umieścić modalny kod HTML jako bezpośrednie dziecko tagu body ! Możesz jednak umieścić kod HTML dla przycisku uruchamiającego tryb modalny, gdziekolwiek potrzebujesz. Uważam, że pozwala to uniknąć dziedziczenia CSS i problemów z pozycją, które powodują ten problem.

Przykład:

<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
źródło
0

W końcu to rozgryzłem. NIE zawijaj przycisku wskazującego modal tagiem kotwicy.

Zły

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

Dobry

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>
ALFmachine
źródło
0

Ten zrobił to dla mnie

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
warkitty
źródło
Miałem podobny problem ze skokami paska nawigacyjnego i kontenera, gdy modal był otwarty. To jest to, czego szukałem.
Awhitey98
Cieszę się, że pomogło!
warkitty
0

Po przeczytaniu kilkudziesięciu odpowiedzi w ciągu kilku godzin ponownie skopiowałem oryginalny kod z pliku bootstrap i debugowałem krok po kroku, aby zobaczyć, co spowodowało, że zawsze skaczę na górę. Ponieważ aktualna najnowsza wersja Bootstrap 3 pokazuje modalne w pozycji, w której się teraz znajdujesz. Dowiedziałem się o tym -webkit-transform: translate3d(0,0,0);iw height: 100%moim tagu body css spowodowało to zachowanie. Może to komuś pomoże.

AlexioVay
źródło
0

U mnie działa, gdy zmieniłem wersję z 3.1.1 na 3.3.7

Jeśli nie musisz używać wersji 3.3.1, spróbuj zastąpić.

Po zmianie dobrze jest sprawdzić , czy reszta funkcji działa poprawnie.

<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
źródło
0

body.modal-open { position: inherit; }

To zadziałało na mnie jak urok.

Nimish goel
źródło
0

Wypróbowałem wszystkie powyższe przykłady - to jedyna rzecz, która u mnie zadziałała:

.modal-open {

            padding-right: 0 !important;

        }

Zdjęcie wyściółki z prawej strony modelu - zapobiega skokowi.

Stnfordly
źródło
0

wysokość: 100% rozwiązuje problem, ale musisz dodać poprawne "div"

Anar Ali
źródło
0

Mam ten sam problem i żadna z odpowiedzi mi nie pomogła. Znalazłem obejście, które wygląda głupio, ale działa przynajmniej w moim przypadku.

Zauważyłem, że strona przewija się na górę tylko raz, a potem kolejne otwarte modały działają zgodnie z oczekiwaniami. Wtedy odkryłem, że ukrycie dowolnego elementu w DOM inicjuje ten sam dziwny zwój. Po prostu utworzyłem fikcyjny element div po załadowaniu strony, a potem go ukryłem i usunąłem, co rozwiązało problem.

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
Borzilo Andrey
źródło
0

Miałem ten sam problem. Problem polegał na tym, że dodałem klasę .modal-open do elementów HTML i body. Po prostu dodaj tę klasę do ciała i wszystko działa zgodnie z oczekiwaniami.

general666
źródło
-1

Spróbuj tego, działa idealnie

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}
minimit
źródło
-3

Jeśli odpowiedź pstenstrm nie działa dla Ciebie, spróbuj połączyć ją z tym zamiennikiem HTML:

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

Powinno to utrzymać przycisk na ekranie.

Ben
źródło