Bloquer le clique autour d’une modal

Découvrons une petite astuce Bootstrap qui vous permettra de bloquer le clique autour d’une modal lorsque cette dernière s’affiche à l’écran. Vous empêcherez alors l’utilisateur à quitter de cette manière la vue.

Quelle intérêt ?

Bootstrap propose plusieurs manières automatiques à l’utilisateur de quitter la vue modal :

• Cliquer sur la croix de la modal.
• Cliquer sur un bouton close prévu à cet effet dans le footer de base.
• Presser la touche échappe de votre clavier.
• Cliquer à l’extérieur de la modal sur ce que Bootstrap appelle backdrop (retrouvez directement plus d’info via la documentation officielle).
  

Cette dernière solution nous intéresse particulièrement. Lorsque vous utiliser le component modal sur votre site, ce dernier peut être utiliser tel un formulaire. Dans ce genre de cas, il n’est pas rare de voir un utilisateur « miss » cliquer à l’extérieur de la modal et générer la fermeture de cette dernière.

Vous l’aurez compris, l’expérience utilisateur des internautes utilisant votre formulaire peut facilement dégringoler vers un état d’énervement passif ! De plus, si le navigateur n’enregistre pas de manière automatique les informations que l’utilisateur aurait déjà pu entrer, l’expérience serait d’avantage dégradée par l’obligation d’entrer à nouveau ses informations.

Comment procède-t-on ?

L’intérêt de cette astuce est d’utiliser aucun code JavaScript (attention, il est cependant possible de le faire avec si besoin est, mais je préfère proposer une technique dépourvue de JS). En effet, nous utiliserons les data attributs directement au sein de la balise HTML.

L’ajout d’un data attribut se fait au niveau du bouton servant à appeler votre modal. Ci-dessous, le code de base proposé par la documentation Bootstrap 4 :

<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>

Ci-dessous, ce même code avec le data attribut additionnel data-backdrop="static" :

<button class="btn ban-primary" type="button" data-backdrop="static" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>

Si par la même occasion vous voulez forcer l’utilisateur à remplir le formulaire ou quitter la modal uniquement par un clique, vous pouvez ajouter le data-keyboard="false" et désactiver la touche échappe du clavier :

<button class="btn ban-primary" type="button" data-backdrop="static" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>

Retrouvez ci-dessous les différentes options utilisant les data attributs avec Bootstrap 4 :

Retrouvez ce détail directement via la documentation officielle de Bootstrap 4