7

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?

Improve this question
5
  • are you using bootstrap? Commented Aug 15, 2020 at 23:20
  • @MosiaThabo yes i am using bootstrap Commented Aug 15, 2020 at 23:20
  • Ok Cool, Could you try the answer I provided. Commented Aug 15, 2020 at 23:26
  • What version of Bootstrap are you using? Commented Aug 19, 2020 at 12:48
  • @PedroLudovicoBozzini bootstrap version 4 Commented Aug 19, 2020 at 13:03

2 Answers 2

Reset to default
5

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; }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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?
5
+50

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.

Improve this answer

6 Comments

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?
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.
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?
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.
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 ..
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.