Twitter bootstrap modale scorrevole

Sto usando il bootstrap di Twitter per un progetto su cui sto lavorando.

Ho una finestra modale che ha una forma un po 'più lunga e non mi è piaciuto che quando la finestra diventava troppo piccola il modale non scorreva (se semplicemente scompariva dalla mia pagina che non è scorrevole).

Per risolvere questo problema ho usato il seguente css

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

Funziona esattamente come voglio in Chrome (ovvero, il modulo è a grandezza naturale quando la finestra è abbastanza grande, ma quando la finestra si restringe, il modale si restringe e diventa scorrevole). Il problema è che in IE il modale è fuori dallo schermo. Qualcuno ha una soluzione migliore a questo problema?

Il mio esempio può essere trovato su tinyhousemap.com (fai clic su "Aggiungi una voce alla mappa" nella finestra di navigazione per visualizzare il modale)

Grazie

Che ne dici della soluzione di seguito? Ha funzionato per me. Prova questo:

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

Dettagli:

1. rimuovere overflow-y: auto;o overflow: auto;dalla classe .modal (importante)
2. rimuovi max-height: 400px;dalla .modalclasse (importante)
3. Aggiungi max-height: 400px;a .modal .modal-body (o cosa mai, può essere 420pxo meno, ma non andrebbe più di 450px)
4. Aggiungi overflow-y: auto;a.modal .modal-body

Fatto, scorrerà solo il corpo.

Ho fatto una piccola soluzione usando solo jQuery.

Per prima cosa, devi aggiungere una classe aggiuntiva al tuo <div class="modal-body">I chiamato "ativa-scroll", quindi diventa qualcosa del genere:

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

Quindi ora metti questo pezzo di codice sulla tua pagina, vicino al tuo caricamento 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>

Funziona perfettamente per me, anche in modo reattivo! :)

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

Funziona per Bootstrap 3 senza codice JS ed è reattivo.

fonte

Prova a eseguire l'override di bootstrap:

 .modal {
position: fixed;

Con:

.modal {
position: absolute;

Ha funzionato per me.

Ho anche aggiunto

.modal { position: absolute; }

al foglio di stile per consentire lo scorrimento della finestra di dialogo, ma se l'utente si è spostato in fondo a una pagina lunga, il modale può finire nascosto nella parte superiore dell'area visibile.

Capisco che questo non sia più un problema in bootstrap 3, ma alla ricerca di una soluzione relativamente rapida fino a quando non aggiorneremo, ho finito con quanto sopra più chiamando quanto segue prima di aprire il modale

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

Sembra essere felice in FireFox, Chrome, IE10 8 e 7 (i browser che avevo a portata di mano)

Il tuo modale è nascosto in firefox, e questo è dovuto alla dichiarazione di margine negativo che hai all'interno del tuo foglio di stile generale:

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

Rimuovi il margine negativo e tutto funziona perfettamente.

In caso di utilizzo .modal {overflow-y: auto;}, creerebbe una barra di scorrimento aggiuntiva sulla destra della pagina, quando il corpo è già in overflow.

Il modo per aggirare questo è rimuovere temporaneamente l' overflow dal tag body e impostare modal overflow-y su auto .

Esempio:

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

Il problema con la soluzione CSS di @grenoult (che funziona, per lo più), è che è completamente reattiva e su dispositivo mobile quando si apre la tastiera (cioè quando fanno clic su un input nella finestra di dialogo modale) la dimensione dello schermo cambia e la finestra di dialogo modale le dimensioni cambiano e può nascondere l'input su cui hanno appena cliccato in modo che non possano vedere cosa stanno digitando.

La soluzione migliore per me era usare jquery come segue:

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

Non risponde alla modifica delle dimensioni della finestra, ma comunque non accade spesso.

Sono stato in grado di superare questo problema utilizzando la metrica "vh" con altezza massima sull'elemento .modal-body. 70vh sembrava giusto per i miei usi. Quindi imposta overflow-y su auto in modo che scorra solo quando necessario.

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

Niente di tutto questo funzionerà come previsto .. Il modo corretto è cambiare position: fixed to position: absolute per la classe .modal