modal bootstrap usuwa pasek przewijania

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?

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.

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

użyłem

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

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

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.

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>

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?

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

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

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

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.

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>

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

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