Bootstrap Modal Issue - Scrolling Gets Disabled

Jquery Problem Overview

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

Jquery Solutions

Solution 1 - Jquery

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.

Solution 2 - Jquery

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

Solution 3 - Jquery

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.

Solution 4 - Jquery

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

Solution 5 - Jquery

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

Solution 6 - Jquery

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

.modal { overflow: auto !important; }

to your css

Solution 7 - Jquery

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

Solution 8 - Jquery

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

Solution 9 - Jquery

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

Solution 10 - Jquery

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

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

Hope it helps

Solution 11 - Jquery

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

Solution 12 - Jquery

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

Solution 13 - Jquery

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

});

Solution 14 - Jquery

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"'
  }

Solution 15 - Jquery

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 .

Solution 16 - Jquery

This is also a solution

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

Solution 17 - Jquery

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.

Solution 18 - Jquery

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

Solution 19 - Jquery

Add this below js code

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

Solution 20 - Jquery

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

Solution 21 - Jquery

Add this CSS code its work for me.

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

Solution 22 - Jquery

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

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

Bootstrap modal

Solution 23 - Jquery

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

Solution 24 - Jquery

> It's Easy

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

Solution 25 - Jquery

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

Solution 26 - Jquery

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

Solution 27 - Jquery

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

Content Type	Original Author	Original Content on Stackoverflow
Question	Carl Smith	View Question on Stackoverflow
Solution 1 - Jquery	Jake Taylor	View Answer on Stackoverflow
Solution 2 - Jquery	Molkobain	View Answer on Stackoverflow
Solution 3 - Jquery	Kamil	View Answer on Stackoverflow
Solution 4 - Jquery	KATJ Srinath	View Answer on Stackoverflow
Solution 5 - Jquery	Manu Burrero Sánchez	View Answer on Stackoverflow
Solution 6 - Jquery	truongpmcs	View Answer on Stackoverflow
Solution 7 - Jquery	ashish dwivedi	View Answer on Stackoverflow
Solution 8 - Jquery	Usman Asif	View Answer on Stackoverflow
Solution 9 - Jquery	FastTrack	View Answer on Stackoverflow
Solution 10 - Jquery	Sunny A	View Answer on Stackoverflow
Solution 11 - Jquery	Joseph Marikle	View Answer on Stackoverflow
Solution 12 - Jquery	Aurelie PATRICIA	View Answer on Stackoverflow
Solution 13 - Jquery	Jar	View Answer on Stackoverflow
Solution 14 - Jquery	akshay sharma	View Answer on Stackoverflow
Solution 15 - Jquery	user3947257	View Answer on Stackoverflow
Solution 16 - Jquery	Sameera Prasad Jayasinghe	View Answer on Stackoverflow
Solution 17 - Jquery	Jordan	View Answer on Stackoverflow
Solution 18 - Jquery	lechat	View Answer on Stackoverflow
Solution 19 - Jquery	Lal chand	View Answer on Stackoverflow
Solution 20 - Jquery	Pramod Vishwakarma	View Answer on Stackoverflow
Solution 21 - Jquery	Ishara Samintha	View Answer on Stackoverflow
Solution 22 - Jquery	danramzdev	View Answer on Stackoverflow
Solution 23 - Jquery	taha mosaad	View Answer on Stackoverflow
Solution 24 - Jquery	Metehan	View Answer on Stackoverflow
Solution 25 - Jquery	Yuri Kovalenko	View Answer on Stackoverflow
Solution 26 - Jquery	NME New Media Entertainment	View Answer on Stackoverflow
Solution 27 - Jquery	Kumail Raza	View Answer on Stackoverflow