モーダルウィンドウでスマホの際に背景のスクロールを固定したいです。

Question

モーダルウィンドウを設置したのですが、
iphoneで確認した際に背景も一緒にスクロールされてしまい、モーダルウィンドウ箇所がスクロールできません。

背景固定してモーダルウィンドウ内をスクロールしたいのですが、ご教授いただけませんでしょうか？

モーダル用のプラグインは、fullPage.jsになります。

<div id="section05" class="section fp-auto-height-responsive">
                        <div class="sectionInner">
                            <p class="imageText01"><img src="img/home/txt_about.png" alt=""></p>
                        </div>
                        <div class="block">
                            <div class="inner inner05">
                                <h2 class="headline1"><em>ABOUT 〇〇〇</em><span>〇〇〇について</span></h2>
                                <div class="section05Textarea">
                                    <p>テキスト</p>
                                    <p>テキスト</p>
                                    <p>テキスト</p>

                                </div>
                                <p class="button"><a href="××××" target="_blank"><span>テキスト</span></a></p>
                            </div>
                        </div>
                    </div>

#main #section05 .section05Textarea {
  font-size: 16px;
  line-height: 2.35;
  text-align: left;
  max-width: 750px;
  margin: auto; }
  #main #section05 .section05Textarea p {
    margin-bottom: 1em; }
  #main #section05 .section05Textarea .text-small {
    margin-top: 40px;
    font-size: 11px;
    line-height: 1.5; }

#main #section05 .inner05 {
      padding-bottom: 20px; }
    #main #section05 .section05Textarea p {
      line-height: 25px;
      font-size: 12px; }
      #main #section05 .section05Textarea p.text-small {
        margin-top: 20px;
        font-size: 10px; }
/* ------------------------------------------------------------------
    section05
    -------------------------------------------------------------------*/
  #main .section p.iconArrow:before {
    width: 36px;
    height: 36px; }
  @-webkit-keyframes sdb03 {
    0% {
      opacity: 0; }
    30% {
      opacity: 1; }
    60% {
      -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1);
      box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1);
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes sdb03 {
    0% {
      opacity: 0; }
    30% {
      opacity: 1; }
    60% {
      -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1);
      box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1);
      opacity: 0; }
    100% {
      opacity: 0; } }
  .modalCloseBtn {
    display: inline-block;
    width: 100%;
    max-width: 202px;
    padding: 15px 10px;
    text-decoration: none;
    font-size: 123.1%;
    background: #FFF;
    border: 1px solid #333;
    color: #333;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    position: relative;
    font-size: 12px;
    background-color: transparent; } }

// fullpage
      

        
		var $main = $('#main');
		if($main.find('.section').length > 1) {
			$main.fullpage({
				scrollOverflow: true,
                //scrollOverflow: false,
                autoScrolling: false,
				scrollOverflowOptions: {
					click:false,
					preventDefaultException: {tagName: /.*/}
				},
				afterRender: function() {
					if (window.innerWidth > 736) {
						$('.section .block').css('min-height', (window.innerHeight - 250) + 'px');
					}
					else {
						$('.section .block').css('min-height', (window.innerHeight - 120) + 'px');
					}
					$('.section .sectionInner').css({
						height: (window.innerHeight - $('header').outerHeight()) + 'px',
						top: $('header').outerHeight() + 'px'
					});
					$('#section01 .sectionInner').css({
						height: window.innerHeight + 'px',
						top: '0'
					});
                    $('#section06 .sectionInner').css({
                        height: (window.innerHeight - $('header').outerHeight()) + 'px',

                        top: '500'
                    });
				},
				afterLoad: function(anchorLink, index) {
					var $curSection = $('#section0' + index);
					if ($curSection.find('.block .inner').css('opacity') == 0) {
						$curSection.find('.sectionInner').animate({ opacity: 1 }, 1000, function() {
							setTimeout(function() {
								$curSection.find('.block').css('top', '0').delay(1000).queue(function() {
									$(this).children('.inner').animate({opacity: 1}, 700, function() {
										// re-active scroll
										$main.fullpage.setAllowScrolling(true);
										$main.fullpage.setKeyboardScrolling(true);
									});
								});
								$curSection.find('.sectionInner').animate({opacity: 0}, 1000);
							}, 1000);
						});
					}
					else {
						if ($curSection.find('.block .inner').length == 0) {
							$curSection.find('.sectionInner').animate({ opacity: 1 }, 1000);
						}
						// re-active scroll
						$main.fullpage.setAllowScrolling(true);
						$main.fullpage.setKeyboardScrolling(true);
					}
				},
				onLeave: function(index, nextIndex, direction) {
					// prepare next animation
					if($('#section0' + nextIndex + ' .block .inner').css('opacity') == 0) {
						$('#section0' + nextIndex + ' .block').css({
							position: 'relative',
							top: window.innerHeight + 'px'
						});
                        
					}
					// header fixed
					if(nextIndex != 1) {
						$('header').addClass('bgWhite');
					}
					else {
						$('header').removeClass('bgWhite');
						$('.naviSP').outerHeight(window.innerHeight);
						$('.naviSP .naviInner').outerHeight(window.innerHeight);
					}
					// navi active
					$('#navi').children().removeClass('active');
					$('#navi').children('li[data-section="' + nextIndex + '"]').addClass('active');
					// stop scroll
					$main.fullpage.setAllowScrolling(false);
					$main.fullpage.setKeyboardScrolling(false);
				}
			});
			$('.iconArrow').on('click touch', function(event) {
				$main.fullpage.moveSectionDown();
			});
			$('#navi li a, .naviSP li a').on('click touch', function(event) {
				$main.fullpage.moveTo($(this).parent().data('section'));
				$('#overlay').trigger('click');
			});
		}
	});
})(jQuery);


//section02
$(function(){
    var slider = $('.modalContent_list').slick();
    $('.js-modal').click(function(){
        slider.css('opacity',0);
        slider.animate({'z-index':1},300,function(){
            slider.slick('setPosition');
            slider.animate({'opacity':1});
        });
    });
});


$(function(){
    $(".js-modalConcept").hide();
        $(".js-modal").click(function(){
            $( this ).blur() ;
            if( $( ".modal-overlay" )[0] ) return false ;
            $( ".js-modalConcept" ).after( '<div class="modal-overlay"></div>' ) ;
            $( ".modal-overlay" ).fadeIn( "slow" ) ;
            $( ".js-modalConcept" ).fadeIn( "slow" ) ;
            $( ".modalCloseBtn" ).unbind().click( function(){
                $( ".modalContent,.modal-overlay" ).fadeOut( "slow" , function(){
                    $('.modal-overlay').remove() ;
                } ) ;
            });
        });
});


//menu
$(function(){
    $(".js-modalMenu").hide();
    $(".js-modalMenuBtn").click(function(){
        $( this ).blur() ;
        if( $( ".modal-overlay" )[0] ) return false ;
        $( ".js-modalMenu" ).after( '<div class="modal-overlay"></div>' ) ;
        $( ".modal-overlay" ).fadeIn( "slow" ) ;
        $( ".js-modalMenu" ).fadeIn( "slow" ) ;
        $( ".modalCloseBtn,.modal-overlay" ).unbind().click( function(){
            $( ".modalContent,.modal-overlay" ).fadeOut( "slow" , function(){
                $('.modal-overlay').remove() ;
            } ) ;
        });
    });
});

//list


$(function(){
    var slider = $('.modalContent_listMenu').slick();
    $('.js-modalMenuBtn').click(function(){
        slider.css('opacity',0);
        slider.animate({'z-index':1},300,function(){
            slider.slick('setPosition');
            slider.animate({'opacity':1});
        });
    });
});

//section03


$(function(){
$(".section03Modal").hide();
$(".js-modal03").click(function(){
    $( this ).blur() ;
    if( $( ".modal-overlay" )[0] ) return false ;
    $( ".section03Modal" ).after( '<div class="modal-overlay"></div>' ) ;
    $( ".modal-overlay" ).fadeIn( "slow" ) ;
    $( ".section03Modal" ).fadeIn( "slow" ) ;
    $( ".modal-overlay,.modalCloseBtn" ).unbind().click( function(){
        $( ".section03Modal,.modal-overlay" ).fadeOut( "slow" , function(){
            $('.modal-overlay').remove() ;
        } ) ;
    });
});
});




$(function(){
    var slider = $('.section03ModalList').slick();
    $('.js-modal03').click(function(){
        slider.css('opacity',0);
        slider.animate({'z-index':1},300,function(){
            slider.slick('setPosition');
            slider.animate({'opacity':1});
        });
    });
});

Comments

[colling]

モーダル用のjqueryプラグインは何を使っているのか書いた方が回答を得られると思います。

[tom1645]

アドバイスありがとうございます。プラグインは、fullPage.jsになります。

[colling]

提示されているソースでは、モーダルウインドウも、スクロールも現れません。問題が再現できるソースを提示できますか？