Question

我有一个模态，在该模态中，有一个显示大隐藏内容的下拉列表，它正在工作。

现在当你打开下一个模态，堆叠在第一个模态的顶部并将其关闭时，下面的模态滚动变为禁用状态。

我创建了一个完整的示例，包括复制我面临的问题的步骤。你可以看到它here。

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

这是一个Bootply来显示行动中的行为：

Bootply

Answer 1

这也是一个解决方案

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

自动工作正常:)这实际上会修复任何运行高于屏幕尺寸的模态。

Answer 2

这是因为当您关闭模式时，它会从modal-open标记中删除<body>。 Bootstrap不支持同一页面上的多个模态（至少在BS3之前）。

使其工作的一种方法是在关闭模态时使用由BS触发的hidden.bs.modal事件，然后检查是否有任何其他模态打开以强制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');
    }
});

Answer 3

我找到了适合你的解决方案。我不确定为什么它不起作用但只有CSS中的一行代码才能解决问题。关闭第二个模态后，第一个模态以某种方式获得overflow-y:hidden。即使它实际设置为auto。

你需要重写这个并在CSS中设置你自己的声明：

#modal_1 {
    overflow-y:scroll;
}

这里有一个有效的DEMO

修改：错误的链接，抱歉。

Answer 4

关注https://github.com/nakupanda/bootstrap3-dialog/issues/70添加

.modal { overflow: auto !important; }

到你的css

Answer 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

Answer 6

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

Answer 7

我认为这是因为twitter bootstrap中的一个错误。即使打开了两个模态，它似乎也会从正文中移除modal-open类。你可以测试jQuery的removeClass函数并绕过它，如果有一个模态仍然打开（基函数的功劳归于这个答案：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;
    }
})();

Answer 8

首先，Bootstrap不支持多个打开的模态。见这里：Bootstrap Modal docs

不支持多个开放模式。确保不打开模态，而另一个模态仍然可见。一次显示多个模态需要自定义代码。

但是，如果必须，你可以在自定义样式表中添加这一点CSS，只要它包含主要的Bootstrap样式表：

.modal {
    overflow-y:auto;
}

Answer 9

我通过删除data-dismiss="modal"解决了这个问题并添加

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

希望有所帮助

Answer 10

将它放入您尝试以模式打开的组件代码中对我有用。看看。

 host: {
    '[style.display]': '"flex"',
    '[style.flex-direction]': '"column"',
    '[style.overflow]': '"auto"'
  }

Answer 11

种类繁多，但我想关闭并在模式关闭时重新打开它，以消除任何怪异的/有害的行为。如果您关闭了淡入淡出功能，则不会注意到它已关闭并重新打开：

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

});

Answer 12

对于 style.scss 中的 Angular +2 环境，请使用以下类，它就像魔术一样工作

userdb = inv1.get(user_id__exact=b)

Answer 13

请确保您使用的是 de modal-body 容器，这是我遇到的问题

<div class="modal-body">
    ...
</div>

Bootstrap modal

Answer 14

添加此 css 代码对我有用

.modal.fade.in {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

Answer 15

简单（如果您使用引导模式），则需要删除tabindex =“-1” 代替此

**糊**

Answer 16

在js代码下面添加此

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

Answer 17

如果您使用bootstrap3或4，请确保您在html正文中有一个modal-open类。我不确定这是否是强制性的，但请确保已清除您的modal-backdrop的z-index。

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

Answer 18

此代码解决了我的问题，当第二个弹出窗口关闭时，我的第一个弹出窗口无法再滚动。

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

Answer 19

对于bootstrap 4，我必须添加！重要

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

如果不执行此操作，将无法使用，并且无法应用。

enter image description here

Answer 20

我实际上已经找到了解决方案。如果您使用$('#myModal').hide();隐藏模型，则实际上需要启用页面正文的滚动。只需在$('#myModal').hide();之后写以下行：

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

这将重新启用滚动。

Answer 21

这也是一个解决方案

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

Answer 22

通过JQuery添加课程＆＃39; modal-open＆＃39;对身体。我认为滚动可以处理除模态之外的所有内容。

作为对前面回复的评论：将溢出属性添加到模态（通过CSS）会有所帮助，但是页面上会有两个滚动条。

Bootstrap模式问题 - 滚动被禁用

22 个答案: