Bootstrap Modal Issue - Scrollen wird deaktiviert

87

Ich habe ein Modal und innerhalb dieses Modals gibt es ein Dropdown-Menü, in dem große versteckte Inhalte angezeigt werden, die funktionieren.

Wenn Sie nun 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. Sie können es hier sehen .

<!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 eine Bootply, um das Verhalten in Aktion zu zeigen:

Bootply

jquery html twitter-bootstrap Carl Smith
quelle
1
"Stellen Sie sicher, dass Sie kein Modal öffnen, während ein anderes noch sichtbar ist. Das Anzeigen von mehr als einem Modal gleichzeitig erfordert benutzerdefinierten Code" und verstößt auch gegen den Zweck, für den Modal bestimmt war.
Blazemonger

Antworten:

115

Dies ist auch eine Lösung

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

Auto funktioniert gut :) Dies behebt tatsächlich alle Modalitäten, die höher als Ihre Bildschirmgröße sind.

Jake Taylor
quelle
4
Diese Lösung löste mein Problem beim Schließen und Öffnen von Modals von jQuery$('.modal').css('overflow-y', 'auto');
Gla
Lebensretter) Danke
Victor Gorban
65

Dies liegt daran, dass beim Schließen eines Modals das modal-openaus dem <body>Tag entfernt wird. Bootstrap unterstützt nicht mehrere Modalitäten auf derselben Seite (zumindest bis BS3).

Eine Möglichkeit, dies zum hidden.bs.modalLaufen zu bringen, besteht darin, das von BS beim Schließen eines Modals ausgelöste Ereignis zu verwenden und dann zu überprüfen, ob ein anderes Modal offen ist, um die modal-openKlasse dem Körper aufzuzwingen .

// 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');
    }
});
Molkobain
quelle
9
(BS4) Erste Antwort Ich konnte mich an die Arbeit machen, musste nur ($ ('. Modal.show'). Length> 0) für Bootstrap 4 verwenden.
Shoejep
Vielen Dank - mein Problem war nicht ganz dasselbe, aber Ihr Kommentar hat mich auf die modal-open-Klasse am Körper hingewiesen, die die Ursache für die Aktion zum Scrollen verlorener Seiten ist.
Jon
37

Ich habe eine Lösung für Sie gefunden. Ich bin 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 werden die ersten overflow-y:hiddenirgendwie. Auch wenn es autotatsächlich eingestellt ist.

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

#modal_1 {
    overflow-y:scroll;
}

Hier haben Sie eine funktionierende DEMO

Edit : falscher Link, sorry.

Kamil
quelle
funktioniert nicht, macht den Container scrollbar, lässt aber auch das Mausrad
stecken
18 
$(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
KATJ Srinath
quelle
3
IMO das ist die beste Antwort. Das Hinzufügen des zusätzlichen CSS für overflow-y: auto funktioniert ebenfalls, führt jedoch, wie unten erwähnt, zu doppelten Bildlaufleisten.
Jacob Rutherford
1
Funktioniert auch mit Bootstrap 4.1. Geschätzt
Willi
1
Einverstanden. 2-3 Antworten getestet und diese funktioniert für Twitter Bootstrap 4.2.1.
Tpojka
11

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

.modal { overflow: auto !important; }

zu Ihrem CSS

truongpmcs
quelle
2
Diese Lösung würde zwei Bildlaufleisten erstellen
Weijing Jay Lin
Es gibt hier so viele Lösungen, dass sie sagten, dass sie funktionieren. Ich habe diese aus Gründen der Einfachheit ausgewählt. hat perfekt für mich funktioniert. upvoted.
Kapitan
9

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

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

Wenn dies nicht getan wird, funktioniert es nicht und es wird nicht angewendet.

Bildschirmfoto

Manu Burrero Sánchez
quelle
6

Zunächst einmal werden mehrere offene Modalitäten von Bootstrap nicht unterstützt. Siehe hier: Bootstrap Modal-Dokumente

Mehrere offene Modalitäten werden nicht unterstützt. Öffnen Sie kein Modal, solange noch ein anderes sichtbar ist. Das Anzeigen von mehr als einem Modal gleichzeitig erfordert benutzerdefinierten Code.

Wenn Sie müssen, können Sie dieses CSS-Bit in Ihr benutzerdefiniertes Stylesheet einfügen, sofern es nach dem Haupt-Bootstrap-Stylesheet enthalten ist:

.modal {
    overflow-y:auto;
}
Überholspur
quelle
3

Ich habe das Problem durch Entfernen data-dismiss="modal" und Hinzufügen gelöst

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

Ich hoffe es hilft

Sunny A.
quelle
Danke @Sunny Ich weiß nicht, warum andere Lösungen für mich nicht funktionieren, aber diese ist definitiv funktioniert
dev-masih
@ MasihAkbari es könnte ein Versionsproblem sein :) Dieser hilft mir auch. Ich benutze BS4. Aufgrund von Verzögerungen kann es zu einem kleinen Leistungsproblem kommen, dies ist jedoch eine schnelle und einfache Lösung.
Weijing Jay Lin
2

Ich gehe davon aus, dass dies an einem Fehler im Twitter-Bootstrap liegt. Es scheint die modal-openKlasse aus dem Körper zu entfernen, selbst wenn zwei Modalitäten offen waren. Sie können einen Test für die removeClassFunktion von jQuery durchführen und ihn umgehen, wenn noch ein Modal offen ist (das Guthaben für die Basisfunktion geht an diese Antwort: 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;
    }
})();
Joseph Marikle
quelle
Wie von @Blazemonger erwähnt, unterstützt Bootstrap explizit keine Stapelmodalitäten
cvrebert
2

Bootstrap unterstützte nicht mehrere Modalitäten gleichzeitig. Es ist ein Bootstrap-Fehler. 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');
}
});
ashish dwivedi
quelle
2 
$('.modal').css('overflow-y', 'auto');
Usman Asif
quelle
1

Dieser Code löste meinen, als das zweite Popup geschlossen wurde, kann mein erstes Popup nicht mehr scrollen.

$('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
  }
});
Aurelie PATRICIA
quelle
1

Eine Art Hack, aber ich mag es, ihn einfach zu schließen und wieder zu öffnen, wenn er modal geschlossen wird, um seltsames / unerwünschtes Verhalten zu beseitigen. Wenn Sie die Überblendung deaktiviert haben, können Sie nicht feststellen, dass sie geschlossen und wieder geöffnet wird:

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');

});
Jared
quelle
0

Fügen Sie über JQuery die Klasse 'modal-open' zum Body hinzu. Ich gehe davon aus, dass die Schriftrolle auf allen außer dem Modal funktioniert.

Als Kommentar zu den vorherigen Antworten: Das Hinzufügen der Überlaufeigenschaft zum Modal (über CSS) hilft, aber dann haben Sie zwei Bildlaufleisten auf der Seite.


quelle
0

Dies ist auch eine Lösung

.modal.fade .modal-dialog{
   -webkit-transform: inherit;
}
Sameera Prasad Jayasinghe
quelle
0

Ich habe tatsächlich eine Lösung dafür gefunden. Sie müssen das Scrollen für Ihren Seitenkörper aktivieren, wenn Sie $('#myModal').hide();ein Modell ausblenden möchten. Schreiben Sie einfach die folgende Zeile nach $('#myModal').hide();:

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

Dadurch wird das Scrollen wieder aktiviert.

Jordanien
quelle
0

Wenn Sie bootstrap3 oder 4 verwenden, stellen Sie sicher, dass Sie eine Klasse haben, die im HTML-Body modal-open ist. Ich bin nicht sicher, ob dies obligatorisch ist, aber stellen Sie möglicherweise sicher, dass Ihr Z-Index des modalen Hintergrunds gelöscht ist.

    $('.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");
    });
die Katze
quelle
0

Fügen Sie dies unter js Code hinzu

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