Modales Bootstrap-Problem – Scrollen wird deaktiviert

Question 1

Ich habe ein Modal und innerhalb dieses Modals gibt es eine Dropdown-Liste, die große versteckte Inhalte anzeigt, die funktionieren.

Wenn Sie jetzt das nächste Modal öffnen, das über dem ersten Modal gestapelt ist, und es schließen, wird das Scrollen auf dem darunter liegenden Modal deaktiviert.

Ich habe ein vollständiges Beispiel erstellt, einschließlich der Schritte zum Replizieren des Problems, mit dem ich konfrontiert bin. Du kannst es sehen hier.

<!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>

Hier ist ein Bootply, um das Verhalten in Aktion zu zeigen:

Bootly

Question 2

Auch das ist eine Lösung

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

Auto funktioniert gut 🙂 Dies wird tatsächlich jedes Modal reparieren, das höher als Ihre Bildschirmgröße läuft.

Question 3

Dies liegt daran, dass beim Schließen eines Modals die entfernt wird modal-open von dem <body> Schild. Bootstrap unterstützt nicht mehrere Modals auf derselben Seite (zumindest bis BS3).

Eine Möglichkeit, damit es funktioniert, ist die Verwendung von hidden.bs.modal Ereignis, das von BS beim Schließen eines Modals ausgelöst wird, dann prüfen Sie, ob ein anderes Modal geöffnet ist, um das zu erzwingen modal-open Klasse am Körper.

// 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

Ich habe eine Lösung für dich gefunden. Ich bin mir nicht sicher, warum es nicht funktioniert, aber nur ein Zeilencode in Ihrem CSS wird das Problem lösen. Nach dem Schließen des zweiten Modals wird der erste erhalten overflow-y:hidden irgendwie. Auch wenn es darauf eingestellt ist auto eigentlich.

Sie müssen dies umschreiben und Ihre eigene Deklaration in CSS festlegen:

#modal_1 {
    overflow-y:scroll;
}

Hier haben Sie eine Arbeit DEMO

Bearbeiten: falscher Link, Entschuldigung.

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

Für Bootstrap 4 musste ich !Important hinzufügen

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

Geschieht dies nicht, funktioniert es nicht und wird nicht angewendet.

Question 7

Folgen https://github.com/nakupanda/bootstrap3-dialog/issues/70 hinzufügen

.modal { overflow: auto !important; }

zu deinem css

Question 8

Bootstrap unterstützte nicht mehrere Modale gleichzeitig. Es handelt sich um einen Bootstrap-Bug. Fügen Sie einfach das folgende Skript für BS4 hinzu.

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