jquery – Bootstrap Modal Issue – Scrolling Gets Disabled-ThrowExceptions

Exception or error:

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

How to solve:

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.

###

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

###

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.

###

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

###

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

.modal { overflow: auto !important; }

to your css

###

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

###

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

###

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

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

Hope it helps

###

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

###

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

});

###

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

###

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 .

###

This is also a solution

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

###

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.

###

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

###

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

###

Add this below js code

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

###

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

Leave a Reply

Your email address will not be published. Required fields are marked *