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?
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?
Odpowiedzi:
Jest to funkcja, klasa
modal-open
jest dodawana do kodu HTMLbody
po 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.
źródło
<style></style>
środku,templateUrl
aby nie wpływał na inne modały w aplikacji.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; }
źródło
użyłem
W takim przypadku unika się wyświetlania poziomego paska przewijania
źródło
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.
źródło
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
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>
źródło
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.Po prostu bawiłem się tą „funkcją” modali Bootstrap. Wygląda na to, że
.modal
klasa maoverflow-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
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:sticky
dodanymi elementami?źródło
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; }
źródło
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; }
źródło
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; }
źródło
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.
źródło
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>
źródło
Jedyna odpowiedź, która mi pomogła, brzmi następująco:
.modal-open { padding-right: 0 !important; } html { overflow-y: scroll !important; }
źródło