Q&A
ご回答ありがとうございます。
こちらも試してみます。
モーダルウィンドウを全画面で表示させ、
収まりきらずはみ出てしまった文章はoverflow-y:auto;でスクロールさせようと考えています。
HTML
1<body> 2<div>元々のコンテンツたち</div> 3<div>元々のコンテンツたち</div> 4<div>元々のコンテンツたち</div> 5<div class="modal">モーダルで表示させる文章</div> 6</body>
CSS
1.modal{ 2position:fixed; 3width:100%; 4height:100%; 5top:0px; 6overflow-y:auto; 7}
Androidでは、
$("html,body").css({"overflow":"hidden"});
で元々のコンテンツはスクロール不可になり、モーダルの文章のみスクロールが可能となりました。
iPhoneでは、
$("html,body").css({"overflow":"hidden","height":"100%"});
を指定すると、元々のコンテンツもモーダルの文章も全てスクロールが不可となりました。
【参考サイト】
iPhoneでは後どのような設定が必要となるのでしょうか。
ご教授お願いいたします。
回答2件
0
自己解決
class="modal"を初期値に戻すことで解決しました。
javascript
1$(".modal").css({"overflow":"auto","height":"auto"});
投稿2018/01/22 04:35
総合スコア7
0
前面に表示したい場合はvhという単位を使ったほうがいいですよ。
htmlやbodyにheight:100%;入れなくても良くなりますし。
css
1.modal{ 2 position:fixed; 3 width:100vw; 4 min-height:100vh; 5 top:0px; 6 overflow-y:auto; 7}
こんな感じで設定してhtmlとbodyは放置でいいかと
投稿2018/01/19 09:31
総合スコア3828
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。