スマホ画面でモーダルを表示した際に裏のスクロールが反応してしまう
スマホアプリを開発しているのですが、スクロールできる一覧画面からタップして詳細情報をモーダルで表示しているのですが、詳細情報をスクロールしようとすると一覧画面がスクロールしてしまい、モーダル画面が固まってしまいます。
なにかアドバイスいただけると幸いです。
モーダルのところは下記のようにjQueryで書いています。
globalMagnificPopup.open({
type: 'ajax',//ポップアップするコンテンツの種類
fixedContentPos: true,//ポップアップコンテンツにposition:fixed;が適用される
fixedBgPos: true,//背景オーバーレイのposition:fixed;が適用される
alignTop: true,//ポップアップは中央にではなく上に揃えらる
showCloseBtn: false,//クローズボタンが表示されない
closeOnContentClick: false,//コンテンツをクリックしてもポップアップが閉じない
closeOnBgClick: true,//背景のオーバーレイをクリックするとポップアップが閉じる
items: [
{//ポップアップさせるコンテンツのソース(画像へのパス、HTMLファイルへのパス、ビデオページへのパス・URLなど)を指定(定義)
src: this_instance.getAttribute('valueUrl')
}
],
ajax: {
settings: {cache:false, async:true},
cursor: 'mfp-ajax-cur', // ポップアップで表示されたときにbodyに追加されるクラス
tError: '<a href="%url%">The content</a> could not be loaded.', // ローディングが失敗したときのエラーメッセージ
},
callbacks: {//ローディング後にコンテンツを変更したり、特定の要素だけを表示したり出来る
parseAjax: function(mfpResponse) {//特定の要素だけを表示
},
ajaxContentAdded: function() {//クラスと要素を足す
closeBtn(this);
orgSelectBtn(this);
}