Przewijalny modalny bootstrap na Twitterze

Używam Twittera do projektu, nad którym pracuję.

Mam okno modalne, które ma nieco dłuższą formę i nie podobało mi się, że gdy okno stało się zbyt małe, modal się nie przewijał (jeśli po prostu zniknął z mojej strony, której nie można przewijać).

Aby to naprawić, użyłem następującego css

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

Działa to dokładnie tak, jak chcę w Chrome (to znaczy, że formularz ma pełny rozmiar, gdy okno jest wystarczająco duże, ale gdy okno się kurczy, modal kurczy się i można go przewijać). Problem polega na tym, że w IE modal jest wyłączony z ekranu. Czy ktoś ma lepsze rozwiązanie tego problemu?

Mój przykład można znaleźć na tinyhousemap.com (kliknij „Dodaj wpis do mapy” w oknie nawigacji, aby pojawił się modal)

Dzięki

A co z poniższym rozwiązaniem? U mnie to zadziałało. Spróbuj tego:

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

Detale:

1. usuń overflow-y: auto;lub overflow: auto;z .modal class (ważne)
2. usuń max-height: 400px;z .modalzajęć (ważne)
3. Dodaj max-height: 400px;do .modal .modal-body (lub cokolwiek, może być 420pxlub mniej, ale nie pójdzie więcej niż 450px)
4. Dodaj overflow-y: auto;do.modal .modal-body

Gotowe, przewinie się tylko treść.

Zrobiłem małe rozwiązanie używając tylko jQuery.

Najpierw musisz dodać dodatkową klasę do swojego <div class="modal-body">I zwanego „ativa-scroll”, więc wygląda to mniej więcej tak:

<div class="modal-body ativa-scroll">

Więc teraz po prostu umieść ten fragment kodu na swojej stronie, obok ładowania JS:

<script type="text/javascript">
  $(document).ready(ajustamodal);
  $(window).resize(ajustamodal);
  function ajustamodal() {
    var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
    $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
  }
</script>

U mnie działa idealnie, także responsywnie! :)

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

Działa to dla Bootstrap 3 bez kodu JS i jest responsywne.

Źródło

Spróbuj i zastąp bootstrapy:

 .modal {
position: fixed;

Z:

.modal {
position: absolute;

U mnie to zadziałało.

Dodałem też

.modal { position: absolute; }

do arkusza stylów, aby umożliwić przewijanie okna dialogowego, ale jeśli użytkownik przejdzie na dół długiej strony, modal może zostać ukryty u góry widocznego obszaru.

Rozumiem, że to już nie jest problem w bootstrapie 3, ale szukając stosunkowo szybkiej poprawki do czasu aktualizacji, skończyło się na powyższym i wywołaniu następującego przed otwarciem modalu

$('.modal').css('top', $(document).scrollTop() + 50);

Wydaje się być szczęśliwy w FireFox, Chrome, IE10 8 i 7 (przeglądarki, które miałem pod ręką)

Twój mod jest ukryty w przeglądarce Firefox, a to z powodu deklaracji ujemnego marginesu, którą masz w swoim ogólnym arkuszu stylów:

.modal {
    margin-top: -45%; /* remove this */
    max-height: 90%;
    overflow-y: auto;
}

Usuń ujemny margines i wszystko działa dobrze.

W przypadku użycia .modal {overflow-y: auto;}utworzyłby dodatkowy pasek przewijania po prawej stronie strony, gdy treść jest już przepełniona.

Rozwiązaniem tego problemu jest tymczasowe usunięcie przepełnienia z tagu body i ustawienie modal overflow-y na auto .

Przykład:

$('.myModalSelector').on('show.bs.modal', function () {

        // Store initial body overflow value
        _initial_body_overflow = $('body').css('overflow');

        // Let modal be scrollable
        $(this).css('overflow-y', 'auto');
        $('body').css('overflow', 'hidden');


    }).on('hide.bs.modal', function () {

        // Reverse previous initialization
        $(this).css('overflow-y', 'hidden');
        $('body').css('overflow', _initial_body_overflow);
});

Problem z rozwiązaniem CSS @ grenoult (które w większości działa) polega na tym, że jest w pełni responsywne i działa na urządzeniach mobilnych, gdy klawiatura wyskakuje (tj. Kiedy klikają dane wejściowe w modalnym oknie dialogowym), zmienia się rozmiar ekranu i modalne okno dialogowe rozmiar zmienia się i może ukryć dane wejściowe, które właśnie kliknęli, aby nie widzieli, co piszą.

Lepszym rozwiązaniem dla mnie było użycie jquery w następujący sposób:

$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });

Nie reaguje na zmianę rozmiaru okna, ale i tak nie zdarza się to często.

Udało mi się to pokonać, używając metryki „vh” z maksymalną wysokością w elemencie .modal-body. 70vh wyglądało na odpowiednie dla moich zastosowań. Następnie ustaw przepełnienie-y na auto, aby przewijało się tylko w razie potrzeby.

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}

Nic z tego nie zadziała zgodnie z oczekiwaniami. Poprawnym sposobem jest zmiana pozycji: ustalona na pozycję: bezwzględna dla klasy .modal