web-dev-qa-db-fra.com

Bootstrap Modal ne fonctionne pas sur les appareils iOS

Je travaille sur un site Web en utilisant Bootstrap et j'ai un problème que je n'arrive pas à résoudre. Voici le brouillon du site .

Sur le panneau "What We Do", j'ai fait une fenêtre modale cliquable sur la première boîte de vignettes (il dit "Enterprise Software development" sous la vignette). Si vous cliquez sur la vignette sur un appareil non mobile, une fenêtre modale apparaîtra.

Sur un ordinateur de bureau (ou un ordinateur portable), cela fonctionne très bien. Mais sur iOS (iPhone, iPad, etc.), cela ne fonctionne pas du tout: c'est-à-dire que le toucher ne fait pas apparaître la fenêtre modale.

Cependant, si vous regardez plus bas sur la page du panneau "Qui nous sommes", il y a un bouton "En savoir plus sur Tim ...". Si vous cliquez sur ou appuyez sur sur ce bouton, cela fonctionnera sur tous les appareils (y compris iOS).

La seule différence que je peux voir entre les deux est que la première est sur un <div> tag, tandis que le second est sur un <button> tag.

Bootstrap ne prend pas en charge le démarrage d'une fenêtre modale à partir d'un <div> sur un appareil iOS? Si c'est le cas, voyez-vous quelque chose de mal avec mon code qui le ferait échouer uniquement sur les appareils iOS?

htmliostwitter-bootstrapmodal-dialog
15
Moshe

La réponse de Chris est correcte. Changer le div en button aiderait à clarifier votre balisage. Si, toutefois, vous devez conserver le même balisage, vous pouvez également ajouter cursor: pointer à votre élément div pour faire savoir à safari que c'est quelque chose qui peut être cliquable. Cela permet également aux utilisateurs de souris d'avoir une indication visuelle standard que l'élément est également cliquable.

Ajoutez simplement la classe clickable puis incluez le CSS suivant:

.clickable {
    cursor: pointer;
}

Voici un MCVE dans Fiddle avec le correctif également

remarquez que je n'ai pas utilisé les classes btn de Bootstrap ici car elles ajouteront automatiquement la règle cursor.

32
KyleMit

Ce n'est pas du tout spécifique à Bootstrap, c'est un problème général sur iOS. Par défaut, de nombreux éléments inhabituellement interactifs (tels que <div>s) ne sont pas cliquables/utilisables sur iOS.
Voir https://github.com/facebook/react/issues/134 et les liens et suivis qui s'y trouvent pour plus de détails.
Si possible, utilisez un <button> ou <a> au lieu. UNE <div> pour un élément interactif n'est pas très sémantique de toute façon.

9
cvrebert