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.

Posté le par Benoît Philibert|2801 vues

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 :

Name Type Default Description
backdrop boolean or the string 'static' true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn’t close the modal on click.
keyboard boolean true Closes the modal when escape key is pressed
focus boolean true Puts the focus on the modal when initialized.
show boolean true Shows the modal when initialized.

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


Ces articles pourraient vous intéresser

Tags

1 commentaire

    • ilariar
    • (20 mars 2018 at 3 h 44 min)

    Merci pour le retour !

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.