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

Question 1

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

Question 2

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.

Question 3

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

Question 4

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.

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

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

.modal { overflow: auto !important; }

do twojego css

Question 7

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

Question 8

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;
}

Question 9

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

Question 10

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

Question 11

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

Question 12

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

Question 13

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

Question 14

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

});

Question 15

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.

Question 16

To też jest rozwiązanie

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

Question 17

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.

Question 18

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");
    });

Question 19

Dodaj poniższy kod js

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