1

At first, I got the same problem like:

How to prevent background scroll when bootstrap modal is open

Prevent BODY from scrolling when a modal is opened

bootstrap-issue

Bootstrap3.3.5
jQuery2.1.4
Bootstrap-material-design

My first problem is when I use Safari 601.1 on iPhone and iPad(both run on iOS9) tring to open the modal and scroll it, the modal didn't scroll but the background scroll.I follow the advise above.like add

body.modal-open {
    overflow: hidden;
    position: fixed;
}

in css or add some js script. the modal fixed as they said.But another problem appear, I can't scroll the modal anymore, even when the modal content is longer than the screen. like this

enter image description here

I also tried set the modal

body.modal-open {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

and wanna it become fix the screen, but it doesn't work.

Edit

What is wired is when I closed the modal and open again, everything works well! I guess it is something about the image in the modal had been loaded at the first time. Any idea?

Edit2

I followed @Vignesh Pandi's advice, first time I open the modal the modal style is

z-index: 1040; display: block;

and the second time is

z-index: 1040; display: block; padding-left: 0px;

I add the z-index because I have multi modal in single page, I add this:

$(document).on('show.bs.modal', '.modal', function () {
    var zIndex = 1040 + (10 * $('.modal:visible').length);
    $(this).css('z-index', zIndex);
    setTimeout(function() {
    $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);

});

to make the modal index correct.After add padding-left: 0px when modal show up didn't solve this problem.And I also try add

overflow: hidden; position: fixed;

in my css, as I sadi, it work well when the page is not longer than the screen, but I can't scrool the modal when the I got a very long page.In face, I got an online example, Hope this would help modal-issue

Community
  • 1
  • 1
Windsooon
  • 6,864
  • 4
  • 31
  • 50
  • You need to set the height of modal body to some value and make overflow overflow-y:scroll; – Vignesh Pandi Jul 29 '16 at 14:33
  • Or if you are allowed to use js than there is a js called mcustomscroll http://manos.malihu.gr/jquery-custom-content-scroller/ – Vignesh Pandi Jul 29 '16 at 14:34
  • It works well when I close the modal and open it again. – Windsooon Jul 29 '16 at 15:23
  • Is your bug got resolved ? – Vignesh Pandi Jul 30 '16 at 09:34
  • @Vignesh Pandi, no, I had edit my question, and don't know why that happen. – Windsooon Jul 30 '16 at 15:35
  • Can you check which style is not been applied during the first time opening of modal ? which is being applied after the first time ? – Vignesh Pandi Jul 30 '16 at 16:05
  • And trying applying your style dynamically after the modal being loaded like this : $('#yourModal').on('hidden.bs.modal', function (e) { $('body').removeClass('stopsscroll'); }) $('#yourModal').on('shown.bs.modal', function (e) { $('body').addClass('stopsscroll'); }) – Vignesh Pandi Jul 30 '16 at 16:14
  • Thanks @Vignesh Pandi, I tried your code but still have this problem.I have edit my question and have an online example now. – Windsooon Aug 01 '16 at 16:15

1 Answers1

2

according bootstrap-issues

I set

.modal {
    -webkit-overflow-scrolling: auto;
}

fix the problem!

Windsooon
  • 6,864
  • 4
  • 31
  • 50