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 lefooter
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
1 commentaire
ilariar
Merci pour le retour !