modal bootstrap usuwa pasek przewijania

95

Kiedy uruchamiam widok modalny na mojej stronie, powoduje to zniknięcie paska przewijania. Jest to denerwujący efekt, ponieważ strona w tle zaczyna się przesuwać, gdy modal wchodzi / znika. Czy jest lekarstwo na ten efekt?

El Dude
źródło
1
Odpowiedź zgodna z przeglądarką: stackoverflow.com/a/47807685/7186739
Super Model

Odpowiedzi:

115

Jest to funkcja, klasa modal-openjest dodawana do kodu HTML bodypo wyświetleniu modalu i usuwana, gdy ją ukryjesz.

To sprawia, że ​​pasek przewijania znika, ponieważ mówi css bootstrap

.modal-open {
    overflow: hidden;
}

Możesz to zmienić, określając

.modal-open {
    overflow: scroll;
}

we własnym css.

flup
źródło
czy możesz być bardziej szczegółowy?
El Dude
1
Dodano więcej szczegółów. Lepiej teraz?
flup
14
Bardziej właściwe jest użycie overflow-y: scroll, które moim zdaniem lepiej odpowiada celowi pytania dotyczącego PO. Korzystanie z przepełnienia: przewijanie spowoduje dodanie poziomego paska przewijania na dole ekranu.
Scott
1
doskonale, działa również z modalnymi pasami kątowymi, może po prostu zawierać powyższy CSS w <style></style>środku, templateUrlaby nie wpływał na inne modały w aplikacji.
davidkonrad
2
Użyj przepełnienia: dziedziczenie; zamiast. W ten sposób modal nie usuwa zwoju, gdy go masz, i nie dodaje go, gdy go nie masz
Alisson Alvarenga
32

Myślę, że dziedziczenie jest lepsze niż przewijanie, ponieważ kiedy otworzysz modalne, zawsze otworzy się za pomocą przewijania, ale jeśli nie masz żadnych zwojów, pojawi się ten sam problem. Więc po prostu robię to:

.modal-open {
  overflow: inherit;
}
Alisson Alvarenga
źródło
To jest prawdziwa odpowiedź. przewijanie przepełnienia nadal wpływa na jakiś element w moim przypadku.
Coisox,
25

użyłem

.modal-open {
  overflow-y: scroll;
}

W takim przypadku unika się wyświetlania poziomego paska przewijania

Mauro
źródło
moglibyśmy połączyć to z odpowiedzią @Alissona Alvarenga i użyć overflow-y: inherit;
Dmitry Kurmanov
23

Lepiej jest użyć overflow-y: przewiń i usuń dopełnienie z treści, modal bootstrap dodał dopełnienie do treści strony.

.modal-open {
  overflow:hidden;
  overflow-y:scroll;
  padding-right:0 !important;
}

Zgodność z przeglądarką IE: przeglądarka IE domyślnie robi to samo.

Super Model
źródło
1
Dzięki. Dodatkowo, jeśli wyskakujące okienko modalne musi się przewijać, a rodzic musi pozostać nieruchomy .modal-body {max-height: calc (100vh - 210px); overflow-y: auto; } .modal-open {overflow: hidden; overflow-y: scroll; padding-right: 0! ważne; }
Oracular Man
9

Dzięki Bogu, że trafiłem na ten post! Wyciągałem włosy z głowy, próbując wymyślić, jak przywrócić paski przewijania podczas zamykania okna za pomocą własnego linku zamykającego. Wypróbowałem sugestie dotyczące CSS, ale po prostu nie działały poprawnie. Po odczytaniu

class modal-open jest dodawane do treści HTML, gdy pokazujesz modalne, i usuwane, gdy je ukryjesz. - @flup

Wymyśliłem rozwiązanie za pomocą jquery, więc jeśli ktoś inny ma ten sam problem i powyższe sugestie nie działają -

<script>
            jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
 jQuery('body').removeClass('modal-open');
                });
            });
        </script>
Bogaty
źródło
Miałem problem polegający na tym, że przesłoniłem zdarzenie hide.bs.modal, aby móc wykonać niestandardowy kod, gdy modal był ukryty, ale nie zdawałem sobie sprawy, że zatrzymało to klasę modal-open przed usunięciem z treści - stąd mój pasek przewijania nie powrócił po zamknięciu tego konkretnego modalu. Nie usuwam ręcznie klasy modal-open w moim kodzie hide.bs.modal i rozwiązuje ten problem.
Jim
1
Powinieneś po prostu dodać data-dismiss="modal"atrybut do swojego linku, zamiast robić coś niestandardowego, jak to. Bootstrap wykona wszystkie odpowiednie czynności zamykające po kliknięciu tego łącza.
nollidge
1
data-dismiss = "modal" nie działa w moim przypadku, ponieważ wzywam funkcję w kontrolerze kątowym. Sugerowane rozwiązanie jQuery działa bardzo dobrze dla mnie.
gianni,
5

Po prostu bawiłem się tą „funkcją” modali Bootstrap. Wygląda na to, że .modalklasa ma overflow-y:auto;Tak więc opakowanie modalne otrzymuje własny pasek przewijania, gdy sam modal staje się zbyt wysoki.

Jeśli zawsze chcesz mieć pasek przewijania (projektanci często tak robią) Najpierw ustaw ciało

body {
    overflow-y:scroll;
}

Następnie uchwyt .modal-open

.modal-open .modal {
    overflow-y:scroll; /* Force a navbar on .modal */
}

.modal-open .topnavbar-wrapper {
    padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar */
}

W takim przypadku pozostaw wyłączanie paska przewijania na treści nietkniętej

Wszystkie inne odpowiedzi na tej stronie powodowały, że moje treści podskakiwały.

Heads-up!

Chociaż to rozwiązanie działało u mnie przez cały czas, wczoraj miałem problem z użyciem tej poprawki, gdy modal jest przeciągany i zbyt duży, aby dopasować się do ekranu (w pionie). Może to mieć coś wspólnego z position:stickydodanymi elementami?

Brainfeeder
źródło
Kiedy dodałem body {overflow-y: scroll;}, mój problem został rozwiązany. Dziękuję Panu.
FrenkyB
1

Lepiej, jeśli utworzysz własny plik css, aby dostosować określoną część swojego bootrapu.

Nie zmieniaj pliku css programu bootstrap, ponieważ zmieni to wszystko w pliku bootstrap, gdy użyjesz go w innych częściach strony.

Jeśli Twoja strona jest dość długa, automatycznie zapewni pasek przewijania. A kiedy modal się otworzy, ukryje pasek przewijania, ponieważ domyślnie robi to bootstrap.

Aby uniknąć ukrywania go po otwarciu modalu, po prostu zastąp go, umieszczając kod css (poniżej) we własnym pliku css.

.modal-open {
    overflow: scroll;
}

tylko na odwrót ...

.modal-open {
    overflow: hidden;
}
NormanCabilatazan
źródło
3
Wydaje się, że zawiera te same informacje, co inna odpowiedź na to pytanie. Jeśli Twoja odpowiedź jest inna, edytuj ją, aby wyjaśnić, co dokładnie się różni. Dodaj nową odpowiedź tylko wtedy, gdy masz coś nowego.
Jeffrey Bosboom
1
Zawiera tę samą odpowiedź, ale można ją wyjaśnić w inny sposób. Czasami zrozumienie zależy od tego, jak zostanie wyjaśnione.
NormanCabilatazan
1
Nie wszyscy czytelnicy wpadli na ten sam pomysł. Lepiej podać inny sposób wyjaśnienia, aby zrozumieli jasno.
NormanCabilatazan
1

Dodatkowo, jeśli wyskakujące okienko modalne musi przewijać się z zawartością w środku, a rodzic musi pozostać nieruchomy, dodaj następujące elementy do swojego Custom.css (nadpisując css)

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
.modal-open {
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 0 !important;
}
Człowiek wyroczni
źródło
0

modal bootstrap po otwarciu dodaje wypełnienie, więc możesz wypróbować ten kod w swoim własnym css

.modal-open {
    padding: 0 !important;
}
mehdigriche
źródło
0

Jest to prawdopodobnie spowodowane tym, że pierwsza modalna (po zamknięciu) usuwa klasę modalnego otwarcia z elementu body, a druga nie doda jej z powrotem po wyzwoleniu modalnego otwarcia.

W tym przypadku użyłbym zdarzenia, aby sprawdzić, czy modal został całkowicie zamknięty / ukryty i otworzyć inny

let modal1 = $('.modal1);
let modal2 = $('.modal2);
$modal1.on('hidden.bs.modal', function (e) {
   $modal2.modal('show');
});

Będzie to czekać do zamknięcia pierwszego modułu, aby upewnić się, że otwarcie modalne zostanie usunięte z ciała i ponownie dodane po otwarciu.

user1508136
źródło
0

Po prostu sam miałem ten problem, a znalezienie tego pytania szybko pomogło mi zrozumieć, co powoduje to zachowanie. Więc dziękuję.

Uważam jednak, że te obejścia CSS są nieco nieeleganckie. Chyba że specjalnie chcesz zachować paski przewijania (chociaż nie mogę wymyślić powodu).

Zasadniczo Bootstrap stosuje dopełnienie w prawo do niektórych elementów, aby skompensować usunięcie paska przewijania.

Dlatego wszystko, co musisz zrobić, to umieścić dodatkowe opakowanie z zerowym dopełnieniem - dokładnie wokół problematycznego elementu (i przenieść do niego docelową klasę).

tj. zmiana z tego ...

<div class="fixed-top p-1 bg-dark">
    ...this content will move as padding will be modified...
</div>

... do tego...

<div class="fixed-top p-0 bg-dark">
    <div class="p-1">
        ...this content won't move...
    </div>
</div>
Matt
źródło
0

Jedyna odpowiedź, która mi pomogła, brzmi następująco:

.modal-open {
  padding-right: 0 !important;
}
html {
  overflow-y: scroll !important;
}
Martijn Hiemstra
źródło