Problem z modą Bootstrap - przewijanie zostaje wyłączone

91

Mam modal iw ramach tego modalu jest rozwijane menu, które wyświetla duże ukryte treści, które działają.

Teraz, gdy otworzysz następny modal, nałożony na pierwszy modal i go zamkniesz, przewijanie na modalu poniżej zostanie wyłączone.

Stworzyłem pełny przykład, w tym kroki mające na celu odtworzenie problemu, z którym mam do czynienia. Możesz to zobaczyć tutaj .

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

Oto Bootply pokazujący zachowanie w akcji:

Bootply

jquery html twitter-bootstrap Carl Smith
źródło
1
„Pamiętaj, aby nie otwierać modalu, gdy inny jest nadal widoczny. Wyświetlanie więcej niż jednego modalu na raz wymaga niestandardowego kodu” , a także narusza cel, dla którego były one przeznaczone.
Blazemonger
Zobacz także stackoverflow.com/a/24914782/58241, który zawiera poprawkę nie tylko dotyczącą problemu z paskiem przewijania, ale także
stylów

Odpowiedzi:

119

To też jest rozwiązanie

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

Auto działa dobrze :) To faktycznie naprawi każdy modal, który działa powyżej rozmiaru twojego ekranu.

Jake Taylor
źródło
5
To rozwiązanie rozwiązało mój problem podczas zamykania i otwierania modali z jQuery$('.modal').css('overflow-y', 'auto');
Gla
Wybawca życia) Dziękuję
Victor Gorban
66

Dzieje się tak, ponieważ kiedy zamykasz modal, usuwa modal-openon <body>tag z tagu. Bootstrap nie obsługuje wielu modali na tej samej stronie (przynajmniej do BS3).

Jednym ze sposobów, aby to zadziałało, jest użycie hidden.bs.modalzdarzenia wyzwalanego przez BS podczas zamykania modalu, a następnie sprawdzenie, czy istnieje inny otwarty modal, aby wymusić modal-openna ciele klasę.

// 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
źródło
10
(BS4) Pierwsza odpowiedź, jaką mogłem zabrać do pracy, po prostu musiałem użyć ($ ('. Modal.show'). Length> 0) dla Bootstrap 4.
Shoejep
Dzięki - mój problem nie był taki sam, ale Twój komentarz wskazał mi klasę modal-open w body, która jest przyczyną operacji przewijania utraconej strony.
Jon
37

Znalazłem dla Ciebie rozwiązanie. Nie jestem pewien, dlaczego to nie działa, ale tylko jeden kod liniowy w CSS rozwiąże problem. Po zamknięciu drugiego modalu pierwsze overflow-y:hiddenjakoś się dostają . Nawet jeśli jest ustawiony na autofaktycznie.

Musisz to przepisać i ustawić własną deklarację w CSS:

#modal_1 {
    overflow-y:scroll;
}

Tutaj masz działające DEMO

Edycja : zły link, przepraszam.

Kamil
źródło
nie działa, powoduje przewijanie kontenera, ale powoduje również
zablokowanie
19 
$(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
źródło
3
IMO to najlepsza odpowiedź. Dodanie dodatkowego css dla overflow-y: auto też działa, ale jak wspomniano poniżej, powoduje podwójne paski przewijania.
Jacob Rutherford
1
Działa również z Bootstrap 4.1. Doceniony
Willi
1
Zgoda. przetestowałem 2-3 odpowiedzi, a ta działa dla Twitter Bootstrap 4.2.1.
Tpojka
11

Śledź https://github.com/nakupanda/bootstrap3-dialog/issues/70 add

.modal { overflow: auto !important; }

do twojego css

truongpmcs
źródło
2
to rozwiązanie stworzyłoby dwa paski przewijania
Weijing Jay Lin
jest tu tak wiele rozwiązań, że powiedzieli, że działa, wybrałem to ze względu na prostotę. działało idealnie dla mnie. głosowano.
kapitan
9

W przypadku bootstrap 4 musiałem dodać! Ważne

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

Jeśli nie zostanie to zrobione, nie zadziała i nie zostanie zastosowane.

zrzut ekranu

Manu Burrero Sánchez
źródło
6

Po pierwsze, Bootstrap nie obsługuje wielu otwartych modali. Zobacz tutaj: Dokumentacja Bootstrap Modal

Wiele otwartych modali nie jest obsługiwanych. Pamiętaj, aby nie otwierać modalu, gdy inny jest nadal widoczny. Wyświetlanie więcej niż jednego modalu na raz wymaga niestandardowego kodu.

Ale jeśli musisz, możesz dodać ten fragment CSS do swojego niestandardowego arkusza stylów, o ile jest on umieszczony po głównym arkuszu stylów Bootstrap:

.modal {
    overflow-y:auto;
}
FastTrack
źródło
3

Rozwiązałem problem, usuwając data-dismiss="modal" i dodając

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

Mam nadzieję, że to pomoże

Sunny A
źródło
Dzięki @Sunny Nie wiem, dlaczego inne rozwiązania nie działają dla mnie, ale to zdecydowanie działa
dev-masih
@MasihAkbari to może być problem z wersją :) Ten też mi pomoże. Używam BS4. Może to mieć niewielki problem z wydajnością z powodu opóźnienia, ale jest to szybka i łatwa naprawa.
Weijing Jay Lin
3

Bootstrap nie obsługiwał wielu modali w tym samym czasie. To jest błąd Bootstrapa. Po prostu dodaj poniższy skrypt dla BS4.

$('body').on('hidden.bs.modal', function () {
if($('.modal.show').length > 0)
{
    $('body').addClass('modal-open');
}
});
ashish dwivedi
źródło
3 
$('.modal').css('overflow-y', 'auto');
Usman Asif
źródło
2

Zakładam, że jest to spowodowane błędem w bootstrapie na Twitterze. Wydaje się, że usuwa modal-openklasę z treści, nawet jeśli dwa modały były otwarte. Możesz wykonać test removeClassfunkcji jQuery i ominąć go, jeśli modal jest nadal otwarty (zaliczenie funkcji bazowej do tej odpowiedzi: 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
źródło
Jak wspomniał @Blazemonger, Bootstrap wyraźnie nie obsługuje
modali
1

Ten kod rozwiązał mój, po zamknięciu drugiego wyskakującego okienka moje pierwsze wyskakujące okienko nie może się już przewijać.

$('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
źródło
1

Coś w rodzaju włamania, ale lubię po prostu zamykać i ponownie otwierać po zamknięciu modalnym, aby pozbyć się wszelkich dziwnych / niechcianych zachowań. Jeśli wyłączyłeś zanikanie, nie możesz zauważyć, że zamyka się i ponownie otwiera:

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
źródło
0

Dodaj za pośrednictwem JQuery klasę „modal-open” do treści. Zakładam, że zwój działa na wszystkim oprócz modalu.

Jako komentarz do poprzednich odpowiedzi: dodanie właściwości overflow do modalu (przez CSS) pomaga, ale wtedy na stronie pojawią się dwa paski przewijania.


źródło
0

To też jest rozwiązanie

.modal.fade .modal-dialog{
   -webkit-transform: inherit;
}
Sameera Prasad Jayasinghe
źródło
0

Właściwie znalazłem rozwiązanie tego problemu. W rzeczywistości musisz włączyć przewijanie treści strony, jeśli używasz $('#myModal').hide();do ukrycia modelu. Po prostu napisz następujący wiersz po $('#myModal').hide();:

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

Spowoduje to ponowne włączenie przewijania.

Jordania
źródło
0

Jeśli używasz bootstrap3 lub 4, upewnij się, że masz klasę modalną otwartą w treści html. Nie jestem pewien, czy jest to obowiązkowe, ale może upewnij się, że twój indeks Z tła modalnego jest wyczyszczony.

    $('.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");
    });
lechat
źródło
0

Dodaj poniższy kod js

    $(document).on("click",".modal",function () {
       if(!$("body").hasClass('modal-open'))
           $("body").addClass('modal-open');
    });
Lal chand
źródło