web-dev-qa-db-ja.com

Bootstrap iOSデバイスではModalは機能しません

Bootstrapを使用してWebサイトを作成していますが、修正できないようです。ここに サイトのドラフト があります。

[What We Do]パネルで、最初のサムネイルボックスにクリック可能なモーダルウィンドウを作成しました（サムネイルの下に[エンタープライズソフトウェア開発]と表示されています）。非モバイルデバイスでサムネイルをクリックすると、モーダルウィンドウがポップアップ表示されます。

デスクトップコンピューター（またはラップトップ）では、問題なく動作します。しかし、iOS（iPhone、iPadなど）ではまったく機能しません。つまり、タップしてもモーダルウィンドウが表示されません。

ただし、[Who We are]パネルのページの下部を見ると、[Timの詳細を見る]ボタンがあります。そのボタンをクリックまたはタップすると、すべてのデバイス（iOSを含む）で機能します。

両者の唯一の違いは、最初のタグが<div>タグにあり、2番目のタグが<button>タグにあることです。

Bootstrap= iOSデバイスで<div>からのモーダルウィンドウの起動をサポートしていませんか？サポートしている場合、iOSでのみ失敗するコードに何か問題がありますか？デバイス？

htmliostwitter-bootstrapmodal-dialog
15
Moshe

クリスの答えは正しいです。 divをbuttonに変更すると、マークアップが明確になります。ただし、同じマークアップを維持する必要がある場合は、cursor: pointer div要素に追加して、これがクリック可能なものであることをサファリに知らせます。また、マウスユーザーに、要素がクリック可能であるという標準的な視覚的合図を表示させます。

クラスclickableを追加して、次のCSSを含めるだけです。

.clickable {
    cursor: pointer;
}

これはFiddleも修正された状態）のMCVEです

bootstrapのbtnクラスはcursorルールを自動的に追加するため、ここでは使用していません。

32
KyleMit

これはBootstrap固有のものではなく、iOSの一般的な問題です。デフォルトでは、通常はインタラクティブではない多くの要素（<div>sなど）は、iOSではクリック/タップできません。
詳細については、 https://github.com/facebook/react/issues/134 およびその中のリンクとフォローアップを参照してください。
可能であれば、代わりに<button>または<a>を使用してください。とにかく、インタラクティブな要素の<div>は、意味的にあまり適切ではありません。

9
cvrebert