Bootstrap模式问题-禁用滚动

90

我有一个模态，并且在该模态中，有一个下拉菜单显示较大的隐藏内容，该下拉列表正在运行。

现在，当您打开堆叠在第一个模态顶部的下一个模态并关闭它时，在下面的模态上的滚动将被禁用。

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

<!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，用于显示实际行为：

自举

jquery  html  twitter-bootstrap 
— 卡尔·史密斯
source
1
— Blazemonger，2015年

Answers:

66

这是因为当您关闭模式时，它会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');
    }
});
— 莫尔科本
source
10
（BS4）第一个答案我可以开始工作，只需要对Bootstrap 4使用（$（'。modal.show'）。length> 0）
— 。– Shoejep
谢谢-我的问题并不完全相同，但是您的评论将我指向了主体上的modal-open类，这是页面滚动操作丢失的原因。
— 乔恩'18
37

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

您需要重写它并在CSS中设置自己的声明：

#modal_1 {
    overflow-y:scroll;
}

在这里，您可以使用演示版

编辑：错误的链接，抱歉。

— 卡米尔
source
不起作用，它使容器可滚动但使鼠标滚轮也卡住了
— Kiran Maniya
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
— 凯特琳娜
source
3
海事组织这是最好的答案。为overflow-y添加额外的css：auto也可以工作，但是如下所述，会导致出现双滚动条。
— 雅各布·卢瑟福
1
也可以与Bootstrap 4.1一起使用。感激
— 威利
1
同意 测试了2-3个答案，该答案适用于Twitter Bootstrap 4.2.1。
— Tpojka '19
9

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

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

如果不这样做，它将无法正常工作并且不会被应用。

屏幕截图

— Manu BurreroSánchez
source
6

首先，Bootstrap不支持多个开放模式。请参阅此处：Bootstrap Modal文档

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

但是，如果必须的话，您可以在自定义样式表中添加以下CSS，只要它包含在主Bootstrap样式表中即可：

.modal {
    overflow-y:auto;
}
— 快速通道
source
3

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

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

希望能帮助到你

— 阳光A
source
感谢@Sunny我不知道为什么其他解决方案对我不起作用，但是这个解决方案肯定是有效的
— dev-masih
@MasihAkbari可能是版本问题:)这也可以帮助我。我正在使用BS4。由于延迟，它可能会有一点性能问题，但这很容易解决。
— Weijing Jay Lin
3

Bootstrap不同时支持多种模式。这是一个Bootstrap错误。只需为BS4添加以下脚本。

$('body').on('hidden.bs.modal', function () {
if($('.modal.show').length > 0)
{
    $('body').addClass('modal-open');
}
});
— 阿什什·德维维迪
source
2

我认为这是由于Twitter引导程序中的错误所致。modal-open即使打开了两个模态，似乎也从类中删除了该类。您可以进行jQueryremoveClass功能测试，如果仍然有模态打开，则绕过它（基本功能的信用转到此答案：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;
    }
})();
— 约瑟夫·马里克
source
正如@Blazemonger提到，引导明确不支持堆叠情态动词
— cvrebert
1

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

$('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
source
1

有点骇人听闻，但我想关闭并在模式关闭时重新打开它，以消除任何怪异/不必要的行为。如果您关闭了淡入淡出功能，那么您将不会注意到它已关闭并重新打开：

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

});
— 杰瑞德
source
0

通过JQuery将'modal-open'类添加到主体。我认为滚动条对除模式之外的所有东西都起作用。

作为对先前响应的评论：将溢出属性添加到模式（通过CSS）会有所帮助，但是您将在页面中有两个滚动条。

0

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

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

这将重新启用滚动。

— 约旦
source
0

如果您使用bootstrap3或4，请确保您在html正文中有一个modal-open类。我不确定这是否是强制性的，但也许要确保清除了modal-background的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");
    });
— Lechat
source
0

在js代码下方添加此代码

    $(document).on("click",".modal",function () {
       if(!$("body").hasClass('modal-open'))
           $("body").addClass('modal-open');
    });
— 拉尔·钱德
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.