Bootstrap のモーダル機能を利用して簡易的な検索機能を作りました。
Ajax でPHP にデータを送信してSQLを発行し、Jsonデータの配列を受け取り一覧を作成します。
検索した結果が、思いのほか件数(15件超)があり、modalがスマホの表示領域を超えてしまいました。
そこで、スワイプして続きのデータを確認しようとしましたが、画面が固まったような状態で確認できなくなりました。
PCではスクロールバーが表示されて、一番下まで確認が出来ます。
スマホの場合はロックされたような状態で同様のことが出来ません。
対処方法をご存知の方がいらっしゃったら教えて頂ければと思います。
宜しくお願いいたします。
追記
<div class="modal fade" id="Modal_Info" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">追加情報</h4> </div> <div class="modal-body"> <input type="text" name="name" id="name" /> <input type="button" id="search_info" value="検索" /> <div id="additional_list"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button> </div> </div> </div>
検索ボタンを押下するとname をPHPに渡して検索をし、Json形式で結果を受け取ります。
その結果をadditional_listの領域に埋め込みます。
(追記)
どうもiOS特有の現象のように思えてきました。