I have the following jQuery code to show a modal popup inside my asp 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?
I have the following jQuery code to show a modal popup inside my asp 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?
Share Improve this question edited Aug 15, 2020 at 23:17 John John asked Jul 30, 2020 at 11:57 John JohnJohn John 1 5- are you using bootstrap? – Mosia Thabo Commented Aug 15, 2020 at 23:20
- @MosiaThabo yes i am using bootstrap – John John Commented Aug 15, 2020 at 23:20
- Ok Cool, Could you try the answer I provided. – Mosia Thabo Commented Aug 15, 2020 at 23:26
- What version of Bootstrap are you using? – Pedro Ludovico Bozzini Commented Aug 19, 2020 at 12:48
- @PedroLudovicoBozzini bootstrap version 4 – John John Commented Aug 19, 2020 at 13:03
2 Answers
Reset to default 5Maybe 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;
}
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.