サイトで Bootstrap モーダル ダイアログを使用しています (デスクトップでは正常に動作します)。iPhone や iPad でこの機能を使用しようとすると、モーダルが機能しません。
これには理由がありますか?経由で Bootstrap の CSS を使用しているときに、誰かがこれを修正しました@import
か?
Bootstrap オーバーライド ファイルを使用して、Bootstrap CSS を変更します。
サイトで Bootstrap モーダル ダイアログを使用しています (デスクトップでは正常に動作します)。iPhone や iPad でこの機能を使用しようとすると、モーダルが機能しません。
これには理由がありますか?経由で Bootstrap の CSS を使用しているときに、誰かがこれを修正しました@import
か?
Bootstrap オーバーライド ファイルを使用して、Bootstrap CSS を変更します。
私は最近同じ問題を抱えていて、iOS のサファリが 1 つの点に関して他のブラウザとは異なる動作をしていることがわかりました。href="#" がない場合、モーダル ウィンドウは safari では表示されませんが、他の多くのブラウザーでは表示されません。
Safari/iOS では動作しませんが、他のブラウザーでは動作しません:
<li><a data-toggle="modal" data-target="#testModal">Modal</a></li>
Safari/iOS およびその他のブラウザーでの作業:
<li><a href="#" data-toggle="modal" data-target="#testModal">Modal</a></li>
iPhoneのブラウザは、モーダルの「フェード」遷移をサポートしていないようです。モーダルダイアログボックスから完全に無効にするか、派手になりたい場合は、サイトがiPhoneデバイスを検出した場合にのみ無効にします。
これはiPhoneでは機能しません
<div class="modal hide fade" id="deleteConfirmation">
これはします
<div class="modal hide" id="deleteConfirmation">
モーダルの問題の束を修正するので、 http://jschr.github.com/bootstrap-modal/をチェックしてください。あなたがしなければならないのは、2つのjsファイルを含めるだけです
--- bootstrap-modalmanager.js
--js/bootstrap-modal.js
そしてそれはちょうど動作します
これは Bootstrap Project でまだ未解決の問題です: https://github.com/twitter/bootstrap/issues/2130
モバイル デバイス (Android OS) でも同様のエラーが発生しました。モーダルはデスクトップでは正常に機能しますが、モバイルでは機能しません。
問題は、グリッド レイアウトの間違った定義にありました。
したがって、レイアウトの任意の列に.col-xsを定義すると、うまくいきました。
これは、ダイアログの位置が正しくないことが原因である可能性があります。.modal クラスの「トップ」設定で遊んでみてください。
非常に簡単です。インライン スタイルの「カーソル」をポインターに追加するだけで、すぐに機能します。style="cursor:pointer;"
<li><a data-toggle="modal" data-target="#testModal" style="cursor:pointer;">Modal</a></li>