Bootstrap Modal Issue - прокрутка возвращается отключена

У меня модальный и внутри этого модального, есть раскрывающийся список, в котором отображается большое скрытое содержимое, которое работает.

Теперь, когда вы открываете следующий модальный, уложенный поверх первого модального и отбрасывая его, прокрутка по модальному внизу становится отключенной.

Я создал полный пример, включая шаги для репликации проблемы, с которой я столкнулся. Вы можете увидеть его здесь.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="#" onclick="location.href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'; return false;" 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>

Здесь Bootply, чтобы показать поведение в действии:

Bootply

Ответы

Ответ 1

Это также решение

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

Авто работает нормально:) Это фактически устранит любой модальный, который будет превышать размер вашего экрана.

Ответ 2

Это связано с тем, что когда вы закрываете модальный, он удаляет modal-open из тега <body>. Bootstrap не поддерживает несколько модалов на одной странице (по крайней мере до BS3).

Один из способов заставить его работать: использовать событие hidden.bs.modal, инициированное BS при закрытии модального кода, а затем проверить, есть ли какой-либо другой модальный открытый, чтобы заставить класс modal-open на теле.

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

Ответ 3

Я нашел решение для вас. Я не уверен, почему это не работает, но только один код строки в вашем CSS решит проблему. После закрытия второго модального, первый из них каким-то образом получает overflow-y:hidden. Даже если его значение установлено на auto.

Вам нужно переписать это и установить собственное объявление в CSS:

#modal_1 {
    overflow-y:scroll;
}

Здесь вы работаете DEMO

Изменить: неправильная ссылка, извините.

Ответ 4

$(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

Ответ 6

Я предполагаю, что это из-за ошибки в twitter bootstrap. Кажется, удалить класс modal-open из тела, даже если два модала были открыты. Вы можете ботинок в тесте для функции jQuery removeClass и обходить его, если модальный все еще открыт (кредит для базовой функции переходит к этому ответу: fooobar.com/questions/32387/...).

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

Ответ 7

Во-первых, множественные открытые модалы не поддерживаются Bootstrap. См. Здесь: Загрузочные модальные документы

Несколько открытых модалов не поддерживаются. Обязательно не открывайте модальный, а другой все еще видимый. Показывать более чем один модальный за раз требует пользовательский код.

Но, если нужно, вы можете добавить этот бит CSS в свою собственную таблицу стилей, если в нее включается после основная таблица стилей Bootstrap:

.modal {
    overflow-y:auto;
}

Ответ 8

Я решил проблему, удалив data-dismiss="modal" и добавление

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

Надеюсь, что это поможет

Ответ 9

Добавьте через JQuery класс 'modal-open' в тело. Я полагаю, что свиток работает на всем, кроме модального.

Как комментарий к предыдущим ответам: добавление свойства переполнения в модальное (через CSS) помогает, но тогда у вас будет две полосы прокрутки на странице.

Ответ 10

Это тоже решение

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

Ответ 11

Я действительно нашел решение для этого. На самом деле вам нужно включить прокрутку тела страницы, если вы используете $('#myModal').hide(); скрыть модель. Просто напишите следующую строку после $('#myModal').hide(); :

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

Это снова включит прокрутку.

Ответ 13

Этот код решил мой, когда закрылось второе всплывающее окно, мое первое всплывающее окно больше не может прокручиваться.

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

Ответ 14

Если вы используете bootstrap3 или 4, убедитесь, что у вас есть класс modal-open в теле html. Я не уверен, является ли это обязательным, но, возможно, убедитесь, что ваш z-индекс модального фона очищен.

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