Bootstrap モーダルは Android と iOS では正しく動作しません。問題追跡ツールではこの問題は認識されていますが、有効な解決策は提示されていません。
画面は暗くなりますが、モーダル自体はビューポートに表示されません。ページの上部で見つけることができます。問題は、ページを下にスクロールしたときに発生します。
以下は bootstrap-responsive.css の関連部分です。
.modal {
position:fixed;
top:50%;
left:50%;
z-index:1050;
max-height:500px;
overflow:auto;
width:560px;
background-color:#fff;
border:1px solid #999;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip:padding-box;
-moz-background-clip:padding-box;
background-clip:padding-box;
margin:-250px 0 0 -280px;
}
適用できる修正方法はありますか?
ベストアンサー1
編集:非公式 Bootstrap モーダルの修正レスポンシブ/モバイルの問題に対処するために構築されました。これはおそらく、問題を解決する最もシンプルで簡単な方法です。
その後、修正が見つかりました先ほど議論した問題の一つ
でbootstrap-responsive.css
.modal {
position: fixed;
top: 3%;
right: 3%;
left: 3%;
width: auto;
margin: 0;
}
.modal-body {
height: 60%;
}
そしてbootstrap.css
.modal-body {
max-height: 350px;
padding: 15px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}