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.


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

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


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

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


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.


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.


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

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.


3

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

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

Tylko moje 2 centy myśli.


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

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


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>

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

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


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

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.


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

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>

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>

0

Ten zrobił to dla mnie

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

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.


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>


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.


0

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


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();

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.


-1

Spróbuj tego, działa idealnie

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


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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.