Problema relativo alla modalità Bootstrap: lo scorrimento viene disattivato

Question 1

Ho un modale e all'interno di quel modale, c'è un menu a discesa che mostra un contenuto nascosto di grandi dimensioni, che funziona.

Ora quando apri il modale successivo, impilato sopra il primo modale e lo ignori, lo scorrimento sul modale sottostante diventa disabilitato.

Ho creato un esempio completo, inclusi i passaggi per replicare il problema che sto affrontando. Puoi vederlo qui .

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <title></title>
    <style>

    </style>
</head>
<body>


    <input type="button" data-toggle="modal" data-target="#modal_1" class="btn btn-lg btn-primary" value="Open Modal 1" >

    <div class="modal fade" id="modal_1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">First Modal</h4>
                </div>
                <div class="modal-body">



                    <form class="form">

                        <div class="form-group">
                            <label>1) Open This First: </label>
                            <input type="button" data-toggle="modal" data-target="#modal_2" class="btn btn-primary" value="Open Modal 2" >
                        </div>

                        <div class="form-group">
                            <label>2) Change this once you have opened the modal above.</label>
                            <select id="change" class="form-control">
                                <option value="small">Show Small Content</option>
                                <option value="large">Show Large Content</option>
                            </select>
                        </div> 

                        <div id="large" class='content-div'>
                            <label>Large Textarea Content.. Try and scroll to the bottom..</label>
                            <textarea rows="30" class="form-control"></textarea>

                        </div>

                        <div id="small" class='content-div'>
                            <label> Example Text Box</label> 
                            <input type="text" class="form-control">
                        </div>  


                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="modal_2">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Second Modal</h4>
                </div>
                <div class="modal-body">

                    <hp>This is the stacked modal.. Close this modal, then chenge the dropdown menu, you cannot scroll... </h5>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


</body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script>

    $(document).ready(function() {


        $(".content-div").hide();
        $("#change").change(function() {
            $(".content-div").hide();
            $("#" + $(this).val()).show();
        });


    });

</script>
</html>

Ecco un Bootply per mostrare il comportamento in azione:

Bootply

Question 2

Anche questa è una soluzione

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

Auto funziona bene :) Questo risolverà effettivamente qualsiasi modale che supera le dimensioni dello schermo.

Question 3

Questo perché quando chiudi un modale, rimuove il modal-opendal <body>tag. Bootstrap non supporta più modali sulla stessa pagina (almeno fino a BS3).

Un modo per farlo funzionare è usare l' hidden.bs.modalevento attivato da BS quando si chiude un modale, quindi controllare se c'è un altro modale aperto per forzare la modal-openclasse sul corpo.

// Hack to enable multiple modals by making sure the .modal-open class
// is set to the <body> when there is at least one modal open left
$('body').on('hidden.bs.modal', function () {
    if($('.modal.in').length > 0)
    {
        $('body').addClass('modal-open');
    }
});

Question 4

Ho trovato una soluzione per te. Non sono sicuro del motivo per cui non funziona, ma solo un codice di riga nel tuo CSS risolverà il problema. Dopo aver chiuso il secondo modale, il primo sta ottenendo in overflow-y:hiddenqualche modo. Anche se in autorealtà è impostato su .

Devi riscriverlo e impostare la tua dichiarazione in CSS:

#modal_1 {
    overflow-y:scroll;
}

Ecco una DEMO funzionante

Modifica : collegamento sbagliato, scusa.

Question 5

$(document).ready(function () {

 $('.modal').on("hidden.bs.modal", function (e) { //fire on closing modal box
        if ($('.modal:visible').length) { // check whether parent modal is opend after child modal close
            $('body').addClass('modal-open'); // if open mean length is 1 then add a bootstrap css class to body of the page
        }
    });
});
//this code segment will activate parent modal dialog 
//after child modal box close then scroll problem will automatically fixed

Question 6

Segui https://github.com/nakupanda/bootstrap3-dialog/issues/70 add

.modal { overflow: auto !important; }

al tuo css

Question 7

Per bootstrap 4 ho dovuto aggiungere! Importante

.modal {
    overflow-y: auto !important;
}

Se questo non viene fatto, non funziona e non viene applicato.

immagine dello schermo

Question 8

Prima di tutto, più modali aperti non sono supportati da Bootstrap. Vedi qui: Bootstrap Modal docs

Modali aperti multipli non supportati. Assicurati di non aprire un modale mentre un altro è ancora visibile. La visualizzazione di più di un modale alla volta richiede un codice personalizzato.

Ma, se devi, puoi aggiungere questo bit di CSS nel tuo foglio di stile personalizzato, purché sia incluso dopo il foglio di stile Bootstrap principale:

.modal {
    overflow-y:auto;
}

Question 9

Bootstrap non supportava più modali contemporaneamente. È un bug di Bootstrap. Basta aggiungere lo script seguente per BS4.

$('body').on('hidden.bs.modal', function () {
if($('.modal.show').length > 0)
{
    $('body').addClass('modal-open');
}
});

Question 10

$('.modal').css('overflow-y', 'auto');

Question 11

Ho risolto il problema rimuovendo data-dismiss="modal" e aggiungendo

setTimeout(function(){ $('#myModal2').modal('show') }, 500);
$('#myModal1').modal('hide');

Spero che sia d'aiuto

Question 12

Presumo che ciò sia dovuto a un bug nel bootstrap di Twitter. Sembra rimuovere la modal-openclasse dal corpo anche se due modali erano aperti. Puoi eseguire un test per la removeClassfunzione di jQuery e bypassarlo se c'è un modale ancora aperto (il credito per la funzione di base va a questa risposta: https://stackoverflow.com/a/1950199/854246 ).

(function(){
    var originalRemoveClassMethod = jQuery.fn.removeClass;

    jQuery.fn.removeClass = function(){
        if (arguments[0] === 'modal-open' && jQuery('.modal.in').length > 1) {
            return this;
        }
        var result = originalRemoveClassMethod.apply( this, arguments );
        return result;
    }
})();

Question 13

Questo codice ha risolto il mio, quando il secondo popup si chiudeva, il mio primo popup non poteva più scorrere.

$('body').on('hidden.bs.modal', '#SecondModal', function (e) {
  if ($('#FirstModal').is(':visible')) { // check if first modal open 
    $('body').addClass('modal-open'); // re-add class 'modal-open' to the body because it was removed when we close the second modal
    $('#FirstModal').focus(); // Focus first modal to activate scrollbar
  }
});

Question 14

Una specie di hack, ma mi piace chiuderlo e riaprirlo alla chiusura modale per eliminare qualsiasi comportamento strano / indesiderato. Se hai disattivato la dissolvenza, non puoi accorgertene che si chiude e si riapre:

var $ModalThatWasOnTop= $('#ModalThatWasOnTop')

$ModalThatWasOnTop.on('hidden.bs.modal', function(e) {
     console.log('closing  modal that was on top of the other modal')
     $('#ModalThatWasCovered').modal('hide');
     $('#ModalThatWasCovered').modal('show');

});

Question 15

Aggiungi tramite JQuery la classe "modal-open" al corpo. Presumo che lo scorrimento funzioni su tutto tranne il modale.

Come commento alle risposte precedenti: l'aggiunta della proprietà overflow al modal (tramite CSS) aiuta ma poi avrai due barre di scorrimento nella pagina.

Question 16

Anche questa è una soluzione

.modal.fade .modal-dialog{
   -webkit-transform: inherit;
}

Question 17

In realtà ho trovato una soluzione per questo. In realtà è necessario abilitare lo scorrimento per il corpo della pagina se si utilizza $('#myModal').hide();per nascondere un modello. Scrivi la seguente riga dopo $('#myModal').hide();:

$('body').attr("style", "overflow:auto")

Questo riattiverà lo scorrimento.

Question 18

Se stai usando bootstrap3 o 4, assicurati di avere una classe modal-open nel corpo html. Non sono sicuro che sia obbligatorio, ma forse assicurati che il tuo z-index dello sfondo modale sia cancellato.

    $('.your-second-modal').on('hidden.bs.modal', function (e) {
        $('.your-second-modal').css('z-index', "");
        $('.modal-backdrop').css('z-index', 1040);
        $('body').addClass("modal-open");
    });

Question 19

Aggiungi questo sotto il codice js

    $(document).on("click",".modal",function () {
       if(!$("body").hasClass('modal-open'))
           $("body").addClass('modal-open');
    });

Question 20

Semplice se usi il bootstrap modal di quanto devi rimuovere tabindex = "- 1" al posto di questo

**Incolla**