CODEWITHSUNDEEP
jquerytwitter-bootstrap
Windsooon
Windsooon

Reputation: 7110

How to make modal scrollable when set the background fixed?

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

Upvotes: 1

Views: 2610

Answers (1)

Windsooon
Windsooon

Reputation: 7110

according bootstrap-issues

I set

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

fix the problem!

Upvotes: 2

Related Questions