Menu
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?
464
Use the . modal-dialog-scrollable class to enable scrolling inside the modal.
Approach: A simple solution to this problem is to set the value of the “overflow” property of the body element to “hidden” whenever the modal is opened, which disables the scroll on the selected element.
Answer: Use the modal('show') Method You can simply use the modal('show') method to show or open the modal window in Bootstrap using jQuery. Other related Bootstrap's modal methods are modal('hide') and modal('toggle') .
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.
88
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
