132

I have a modal and within that modal, there is a dropdown that displays large hidden content, which is working.

Now when you open the next modal, stacked on top of the first modal and dismiss it, the scrolling on modal underneath becomes disabled.

I have created a full example, including the steps to replicate the issue I am facing. You can see it 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>

Here's a Bootply to show the behaviour in action:

Bootply

2

27 Answers 27

176

This is also a solution

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

Auto works fine :) This will actually fix any modal that runs higher than your screen size.

2
  • 11
    This solution solved my problem, while closing and opening modals from jQuery $('.modal').css('overflow-y', 'auto');
    – Gli
    Mar 6, 2019 at 14:52
  • Life savior) Thank you Aug 2, 2020 at 14:08
97

This is because when you close a modal, it removes the modal-open from the <body> tag. Bootstrap doesn't support multiple modals on the same page (At least until BS3).

One way to make it work, is to use the hidden.bs.modal event triggered by BS when closing a modal, then check if there is anyother modal open in order to force the modal-open class on the body.

// 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');
    }
});
5
  • 19
    (BS4) First answer I could get to work, just had to use ($('.modal.show').length > 0) for Bootstrap 4.
    – Shoejep
    Oct 23, 2018 at 9:47
  • 1
    Thanks - my issue wasn't quite the same but your comment pointed me to the modal-open class on body which is the cause of the lost page scroll action.
    – Jon
    Oct 30, 2018 at 11:03
  • 2
    the best answer
    – Renan
    Feb 8, 2022 at 16:43
  • 1
    This is accually The BEST answer i ever found in stack overflow . Jul 6, 2022 at 17:32
  • Very nice! I just added this to my app.js (BS5) and it works beautifully. Oct 19, 2022 at 14:31
50

I have found a solution for you. I'm not sure why it doesn't work but just one line code in your CSS will solve the problem. After closing second modal, the first one are getting overflow-y:hidden somehow. Even if its set to auto actually.

You need to rewrite this and set your own declaration in CSS:

#modal_1 {
    overflow-y:scroll;
}

Here you have a working DEMO

Edit: wrong link, sorry.

1
  • not working, it makes container scrollable but makes mouse wheel stucked also Oct 4, 2018 at 11:24
26
$(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
3
  • 3
    IMO this is best answer. Adding the extra css for overflow-y: auto works too but as mentioned below, results in double scrollbars. Sep 29, 2017 at 14:48
  • 2
    Works with Bootstrap 4.1 too. Appreciated
    – Willi
    Aug 28, 2018 at 19:32
  • 2
    Agreed. tested 2-3 answers and this one works for Twitter Bootstrap 4.2.1.
    – Tpojka
    Mar 28, 2019 at 13:28
18

For bootstrap 4 I had to add !Important

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

If this is not done, it does not work and it is not applied.

screenshot

1
  • For me it is an half working solution, because i need to click on the modal te re-gain scroll ability. The @ashish dwivedi solution worked perfectly for me. Dec 26, 2020 at 10:18
15

Follow https://github.com/nakupanda/bootstrap3-dialog/issues/70 add

.modal { overflow: auto !important; }

to your css

2
  • 2
    this solution would create two scrollbars Jul 27, 2018 at 21:47
  • there are so many solution here that they said is working, i picked this one because of simplicity. worked perfectly for me. upvoted.
    – kapitan
    May 7, 2019 at 2:34
14

Bootstrap did not support multiple modals at the same time. It is a Bootstrap Bug. Just add the below script for BS4.

$('body').on('hidden.bs.modal', function () {
if($('.modal.show').length > 0)
{
    $('body').addClass('modal-open');
}
});
1
  • 1
    Works great. But be sure to put this code after your modals, or in a $(document).ready method. Dec 26, 2020 at 10:16
10
$('.modal').css('overflow-y', 'auto');
0
7

First off, multiple open modals are not supported by Bootstrap. See here: Bootstrap Modal docs

Multiple open modals not supported. Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

But, if you must, you can add this bit of CSS in your custom stylesheet, as long as it's included after the main Bootstrap stylesheet:

.modal {
    overflow-y:auto;
}
3

I solved the issue by removing data-dismiss="modal" and adding

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

Hope it helps

2
  • Thanks @Sunny I don't know why other solutions are not worked for me but this one is definitely worked
    – dev-masih
    Aug 10, 2017 at 2:44
  • @MasihAkbari it could be version issue :) This one is also help me. I'm using BS4. It might have a little performance issue due to delay, but this is quick easy fix. Jul 27, 2018 at 21:51
2

I assume this is because of a bug in twitter bootstrap. It seems to remove the modal-open class from the body even if two modals were open. You can shoe in a test for jQuery's removeClass function and bypass it if there's a modal still open (credit for the base function goes to this answer: 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;
    }
})();
1
1

This codes solved mine,when second popup closed, my first popup can't scroll any more.

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

Kind of a hack , but I like to just close and reopen it upon modal close to do away with any weird/unwanted behavior. If you have fade turned off then you cannot notice it closing and reopening:

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

});
1

Putting this inside component code which you are trying to open in modal is working for me. Have a look.

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

It's Easy

.modal { overflow-y: auto !important; }
2
  • It's easy because you copied from others? When answering old question, please read existing answer before posting yours. Aug 27, 2021 at 3:38
  • 1
    I don't understand what you mean. I'm just advising you to check for existing answer (especially on an old question 6+ years old) before posting your (duplicated) version instead of wasting your time. This kind of answers usually end up being Flagged and removed. Aug 27, 2021 at 7:08
1

Stumbled on this problem with bootstrap 5. Since bootstrap 5 is walking away from jQuery, here is a solution when you open multiple modals and your body element scrolling gets disabled. Events can be found here https://getbootstrap.com/docs/5.0/components/modal/#events;

 document.querySelector('body').addEventListener('hidden.bs.modal', (event) => {
    // remove the overflow: hidden and padding-right: 15px
    document.querySelector('body').removeAttribute('style');
 });

1

If you are opening another Modal from one Modal you can use this:

$('#myModal').on('hidden.bs.modal', function () {
    // Load up a new modal...   
    $('#myModalNew').modal('show') 
})
0

Add via JQuery the class 'modal-open' to the body. I presume that the scroll works on everything except the modal.

As a comment to the previous responses : adding the overflow property to the modal ( via CSS ) helps but then you will have two scroll bars in the page .

0

This is also a solution

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

I have actually figured out a solution for this. You actually need to enable the scrolling for your page body if you are using $('#myModal').hide(); to hide a model. Just write the following line after $('#myModal').hide();:

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

This will re-enable the scrolling.

0

If you are using bootstrap3 or 4, make sure you have a class modal-open in html body. I am not sure if this is mandatory, but maybe make sure your z-index of modal-backdrop is cleared.

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

Add this below js code

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

Be sure that you are using de modal-body container, this was the problem I had

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

Bootstrap modal

0

For Angular +2 enviroment in style.scss use following class it works like magic

  .cdk-overlay-container .cdk-global-overlay-wrapper {
    pointer-events: auto !important;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;  }
0

Add this CSS code its work for me.

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

This happens, because after closing second modal, first modal id="modal_1" lost css attribute: overflowY:auto.

You need to restore that and it will works. For instance in your code example simple add:

$(document).on('hidden.bs.modal', '#modal_2',function () {
       $('#modal_1').css('overflowY','auto')
});
-1

Simple if you using bootstrap modal than you need to remove tabindex="-1" in place of this

**Paste**

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.