unable to scroll down inside jQuery modal popup when access from my iphone (from a touch screen)

Question

I have the following jQuery code to show a modal popup inside my asp.net MVC core web application:

$(document).ready(function () {
    $(function () {
        $.ajaxSetup({ cache: false });
        $(document).on('click', 'button[data-modal]', function (e) {
            $('#myModalContent').css({ "margin": "5px", "max-height": screen.height * .82, "max-width": screen.height * .82, "overflow-y": "auto" }).load($(this).attr("data-url"), function () {
                $('#myModal').modal({
                    height: 1000,
                    width: 2200,
                    resizable: true,
                    keyboard: true,
                    backdrop: 'static',
                    draggable: true
                }, 'show');
            });
            return false;
        });
    });
});

and the following HTML:

 <div id='myModal' class='modal fade in'>
     <div class="modal-dialog">
           <div class="modal-content">
               <div id='myModalContent'></div>
           </div>
     </div>
 </div>

now the modal popup will render a partial view which will show a horizontal tool bar when accessed from normal windows machine (as the partial view has a lot of horizontal content), but if I access the modal popup inside my iPhone then I can not scroll down inside the modal popup. If I try to scroll down, I will be actually scrolling the main page and not the modal popup. Any advice on how I can fix this?

are you using bootstrap? – Mosia Thabo Aug 15 '20 at 23:20 — Mosia Thabo, Aug 15 '20 at 23:20
@MosiaThabo yes i am using bootstrap – John John Aug 15 '20 at 23:20 — John John, Aug 15 '20 at 23:20
Ok Cool, Could you try the answer I provided. – Mosia Thabo Aug 15 '20 at 23:26 — Mosia Thabo, Aug 15 '20 at 23:26
What version of Bootstrap are you using? – Pedro Ludovico Bozzini Aug 19 '20 at 12:48 — Pedro Ludovico Bozzini, Aug 19 '20 at 12:48
@PedroLudovicoBozzini bootstrap version 4 – John John Aug 19 '20 at 13:03 — John John, Aug 19 '20 at 13:03

Mosia Thabo · Answer 1 · 2020-08-20T11:44:53.277

5

You can configure this in such a way that when your modal opens, add a class to your <body> element to prevent it from scrolling.

On your js, include this where you toggle your modal:

$(document.body).addClass('modal-open'); Do this when your modal opens $(document.body).removeClass('modal-open'); Do this when your modal closes

Then in your css, you can apply some style to that specific class:

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

If you're using bootstrap, you might consider using checking this out. I am not sure if this is still the case, I'm not familiar with bootstrap.

edited Aug 20 '20 at 11:44

answered Aug 15 '20 at 23:26

Mosia Thabo

4,009
1
14
24

i tried your CSS , this have completely prevented scrolling on mobile devices, so if a user open this on mobile browser, they can not see the whole modal popup... previously before adding your code, the user can scroll but will be scrolling the main page and not the popup.. any advice on this further? – John John Sep 18 '20 at 11:50
1

You must add `overflow: auto` on your Modal style. because what the above code does is prevent scrolling on main page... you must still further activate scrolling event on your actual modal container. – Mosia Thabo Sep 18 '20 at 14:24
i added this css `body.modal-open { position: fixed; overflow: hidden; left:0; right:0; } .modal{ -webkit-overflow-scrolling: auto; }`.. so i am already adding `overflow: auto`.. is this correct? – John John Sep 18 '20 at 14:52
1

Yes, That way your modal will add a scrolling effect when the content inside is longer than the display. Try it and give feedback so that I can suggest other approaches. – Mosia Thabo Sep 18 '20 at 15:58
as i mentioned i m already adding this css `body.modal-open { position: fixed; overflow: hidden; left:0; right:0; } .modal{ -webkit-overflow-scrolling: auto; }.. so i am already adding overflow: auto` , and this will prevent scrolling the modal popup inside the mobile phone, so currently the user can not view the whole popup on the iphone browser, as the modal popup is UN-scrolable .. – John John Sep 18 '20 at 23:09
What browser are you testing this on? – Mosia Thabo Sep 19 '20 at 16:20

score 4 · Answer 2 · answered Aug 19 '20 at 12:47

4

Maybe this answer can help you. It sugests the following CSS for a similar problem:

body.modal-open {
    position: fixed;
    overflow: hidden;
    left:0;
    right:0;
}
.modal{
    -webkit-overflow-scrolling: auto;
}

answered Aug 19 '20 at 12:47

Pedro Ludovico Bozzini

372
2
10

i tried your CSS , this have completely prevented scrolling on mobile devices, so if a user open this on mobile browser, they can not see the whole modal popup... previously before adding your code, the user can scroll but will be scrolling the main page and not the popup.. any advice on this further? – John John Sep 18 '20 at 11:49

unable to scroll down inside jQuery modal popup when access from my iphone (from a touch screen)

2 Answers2