CODEWITHSUNDEEP
javascripthtmljqueryasp.net-core-mvc
John John
John John

Reputation: 1

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

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?

Upvotes: 7

Views: 1614

Answers (2)

Mosia Thabo
Mosia Thabo

Reputation: 4267

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.

Upvotes: 5

Pedro Ludovico Bozzini
Pedro Ludovico Bozzini

Reputation: 412

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;
}

Upvotes: 5

Related Questions