Bootstrap Modal Issue - Scrolling Gets Disabled

Question

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

["Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code"](http://getbootstrap.com/javascript/#modals), and also violates the purpose for which modals were intended. — Blazemonger, Jan 21 '15 at 22:04
See also https://stackoverflow.com/a/24914782/58241 which contains a fix not only for the scrollbar issue but for styling issues as well — benrwb, Nov 12 '20 at 18:17

score 175 · Answer 1 · answered Jan 21 '15 at 22:01

175

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.

answered Jan 21 '15 at 22:01

Jake Taylor

4,246
3
15
16

11

This solution solved my problem, while closing and opening modals from jQuery `$('.modal').css('overflow-y', 'auto');` – Gli Mar 06 '19 at 14:52
Life savior) Thank you – Victor Gorban Aug 02 '20 at 14:08

score 97 · Answer 2 · answered May 04 '16 at 15:37

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

answered May 04 '16 at 15:37

Molkobain

1,457
1
12
17

18

(BS4) First answer I could get to work, just had to use ($('.modal.show').length > 0) for Bootstrap 4. – Shoejep Oct 23 '18 at 09: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 '18 at 11:03
2

the best answer – Renan Feb 08 '22 at 16:43
1

This is accually The BEST answer i ever found in stack overflow . – Yasser CHENIK Jul 06 '22 at 17:32
Very nice! I just added this to my app.js (BS5) and it works beautifully. – Mauritz Hansen Oct 19 '22 at 14:31

score 50 · Answer 3 · answered Jan 21 '15 at 21:56

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.

answered Jan 21 '15 at 21:56

Kamil

1,987
16
14

not working, it makes container scrollable but makes mouse wheel stucked also – Kiran Maniya Oct 04 '18 at 11:24

KATJ Srinath · Answer 4 · 2015-09-22T09:22:02.783

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

edited Sep 22 '15 at 09:22

answered Sep 22 '15 at 09:11

KATJ Srinath

950
1
11
18

3

IMO this is best answer. Adding the extra css for overflow-y: auto works too but as mentioned below, results in double scrollbars. – Jacob Rutherford Sep 29 '17 at 14:48
2

Works with Bootstrap 4.1 too. Appreciated – Willi Aug 28 '18 at 19:32
2

Agreed. tested 2-3 answers and this one works for Twitter Bootstrap 4.2.1. – Tpojka Mar 28 '19 at 13:28

score 18 · Answer 5 · edited Feb 25 '20 at 08:00

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

edited Feb 25 '20 at 08:00

crusy

1,424
2
25
54

answered Jan 15 '19 at 10:05

Manu Burrero Sánchez

186
1
6

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. – Matthieu Charbonnier Dec 26 '20 at 10:18

score 15 · Answer 6 · answered Dec 17 '16 at 04:09

15

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

.modal { overflow: auto !important; }

to your css

answered Dec 17 '16 at 04:09

truongpmcs

179
1
4

2

this solution would create two scrollbars – Weijing Jay Lin Jul 27 '18 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 07 '19 at 02:34

score 14 · Answer 7 · answered Jan 16 '20 at 07:31

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

answered Jan 16 '20 at 07:31

ashish dwivedi

141
1
2

1

Works great. But be sure to put this code after your modals, or in a `$(document).ready` method. – Matthieu Charbonnier Dec 26 '20 at 10:16

score 10 · Answer 8 · answered Feb 25 '20 at 10:56

10

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

answered Feb 25 '20 at 10:56

Usman Asif

260
2
12

score 7 · Answer 9 · answered Feb 20 '17 at 04:40

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

Sunny A · Answer 10 · 2017-05-12T00:51:35.207

3

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

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

Hope it helps

edited May 12 '17 at 00:51

answered May 11 '17 at 00:36

Sunny A

29
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 '17 at 02: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. – Weijing Jay Lin Jul 27 '18 at 21:51

score 2 · Answer 11 · edited May 23 '17 at 11:54

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

As mentioned by @Blazemonger, [Bootstrap explicitly doesn't support stacking modals](http://getbootstrap.com/javascript/#modals) — cvrebert, Jan 22 '15 at 02:48

score 1 · Answer 12 · edited Jan 22 '19 at 16:29

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

score 1 · Answer 13 · answered Nov 06 '19 at 19:23

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

});

score 1 · Answer 14 · answered Jul 15 '21 at 16:24

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

answered Jul 15 '21 at 16:24

akshay sharma

11
1

score 1 · Answer 15 · answered Aug 26 '21 at 08:40

1

It's Easy

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

answered Aug 26 '21 at 08:40

Metehan

41
8

It's easy because you copied from [others](https://stackoverflow.com/a/54196631/6670491)? When answering old question, please read existing answer before posting yours. – HardcoreGamer Aug 27 '21 at 03: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. – HardcoreGamer Aug 27 '21 at 07:08

score 1 · Answer 16 · answered Feb 24 '22 at 18:02

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

Kumail Raza · Answer 17 · 2022-10-19T11:27:06.340

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

edited Oct 19 '22 at 11:27

answered Apr 03 '22 at 11:21

Kumail Raza

63
5

score 0 · Answer 18 · answered Mar 03 '17 at 16:00

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 .

score 0 · Answer 19 · answered May 18 '18 at 05:40

0

This is also a solution

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

answered May 18 '18 at 05:40

Sameera Prasad Jayasinghe

1,690
1
13
15

score 0 · Answer 20 · answered Jun 20 '18 at 11:16

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.

lechat · Answer 21 · 2019-04-12T02:21:38.490

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

edited Apr 12 '19 at 02:21

answered Apr 11 '19 at 10:08

lechat

390
2
15

score 0 · Answer 22 · answered Dec 26 '19 at 08:51

0

Add this below js code

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

answered Dec 26 '19 at 08:51

Lal chand

1

Ishara Samintha · Answer 23 · 2021-08-27T10:12:10.853

0

Add this CSS code its work for me.

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

edited Aug 27 '21 at 10:12

answered May 06 '21 at 11:53

Ishara Samintha

460
6
8

score 0 · Answer 24 · answered May 25 '21 at 13:22

0

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

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

Bootstrap modal

answered May 25 '21 at 13:22

danramzdev

149
1
3

score 0 · Answer 25 · answered Jul 29 '21 at 15:17

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

answered Jul 29 '21 at 15:17

taha mosaad

567
5
13

score 0 · Answer 26 · edited Dec 19 '21 at 20:49

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

edited Dec 19 '21 at 20:49

Keivan

1,300
1
16
29

answered Dec 18 '21 at 12:37

Yuri Kovalenko

11
1

score -1 · Answer 27 · answered Dec 15 '20 at 09:37

-1

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

**Paste**

answered Dec 15 '20 at 09:37

Pramod Vishwakarma

27
4

Bootstrap Modal Issue - Scrolling Gets Disabled

27 Answers27

Linked