Menu
Various pages on our website open up JQuery 'Modal Dialog' boxes.
These work fine in every web browser.
However a problem occurs when viewing on an iPad or iPhone, and i believe this is a common issue.
On some pages the modal dialog box is too big for the iPad screen, therefore i need to scroll the modal box.
However when I do this dialog box doesnt move, but the background (i.e. the main screen behind it) scrolls.
I want to disable the background from scrolling when the modal is open but enable the modal dialog to scroll.
I have tried 'position:fixed' underneath the 'overflow:hidden' which has solved the issue for others, unfortunately for me, the issue still exists.
Does anyone have any other ideas/things that I can try?
Below is an example of the code for one of the pages that opens in a modal dialog box.
Thanks
<script>
function myOnLoad() {
window.parent.$('body').css('overflow', 'hidden');
}
</script>
<body onload="myOnLoad()">
<div class="wrapper">
<div id="popup" class="modalDialog2">
<!--DIALOG CONTENT HERE-->
</div>
</div>
<script type="text/javascript">
// close Modal
$("#close").click(function (e) {
e.preventDefault();
window.parent.$('body').css('overflow', 'auto');
window.parent.$("iframe").attr('src');
window.parent.$(".modalDialog").removeClass('show');
});
</script>
825
I had the issue, lines of code below resolved it for me -
html{
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
SOLUTION
This snippet of code and corresponding link did the trick...
$(function(){
if (/iPhone|iPod|iPad/.test(navigator.userAgent))
$('iframe').wrap(function(){
var $this = $(this);
return $('<div />').css({
width: $this.attr('width'),
height: $this.attr('height'),
overflow: 'scroll',
'-webkit-overflow-scrolling': 'touch'
});
});
})
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