以前似たような質問をさせていただいたのですが、症状が異なるためあらためて質問させていただきます。
Bootstrap3でダイアログの中にFORMタグを埋め込んでいます。
スマホでinputの入力を行うとダイアログが消えてしまうことが多々発生します(正常に動作することもあります)。
画面をタップすると場所によって入力状態になったりするのでダイアログ自体は存在していそうです(裏に隠れてる?)
ダイアログのz-indexは9999と大きい数字を設定しています。
PCでは問題なく動いているのですが対処法など無いでしょうか?
いろいろ動作確認をしているのですが
アンドロイドのタブレット(NEXUS7)Chromeでの正常動作が確認できました。
iPod touchのChrome、Safariでこの症状が出ています。
追加情報:
inputに入力するときにソフトウェアキーボードを出るのですが、この時にscale値が変わるようで少しダイアログが大きくなります。
この時にレスポンシブ対応の動きが見えます。
この状態で入力を行い、入力終了すると上記の症状が発生するのですが、入力せずにダイアログのxボタンを押すなりダイアログの外をタップしダイアログを消すと次からは正常に動作するようになります。
何かしら初期化処理を行えば改善するのではというところまでたどり着いたのですが、何を行う必要があるのか調べられませんでした。
scaleが関連しているっぽいのでuser-scalableをnoにすると問題の症状は発生しませんでした。
ですが、可能であればyesで作りたいので防ぐ方法ありましたらよろしくお願いします。
これとは別なので別質問するほうが良いかもしれませんが一つ
ダイアログの表示を今までjQueryのon('click')から$(セレクタ).modal()で行っていたものを以下のようにtd要素からダイアログの呼び出しを行うようにしたのですがPCでは正常に動作したものの、iPod touchのChromeでは呼び出せませんでした。元に戻して動いているのでこのままでも良いのですが、対処法があれば対処したいと思いますのでよろしくお願いします
html
1<div id="dialog" data-toggle="modal" data-target="#sampleModal"> 2 <div class="modal-dialog" data-keyboard="true"> 3 </div> 4</div> 5 6<td data-toggle="modal" data-target="#dialog">
あなたの回答
tips
プレビュー