Maison >interface Web >tutoriel CSS >Comment empêcher les modaux Bootstrap de se fermer lorsque vous cliquez à l'extérieur ?

Comment empêcher les modaux Bootstrap de se fermer lorsque vous cliquez à l'extérieur ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-13 02:03:02909parcourir

How to Prevent Bootstrap Modals from Closing When Clicking Outside?

Comment désactiver la fermeture modale en cliquant en dehors de la zone d'amorçage

Dans les modaux Bootstrap, vous pouvez rencontrer l'inconvénient d'une fermeture modale involontaire lorsque les utilisateurs cliquent en dehors de la fenêtre modale. Pour résoudre ce problème et améliorer l'expérience utilisateur, vous pouvez désactiver cette fonctionnalité, soit globalement, soit spécifiquement pour certains modaux.

Désactivation globale

Pour désactiver la fermeture modale en cliquant à l'extérieur pour tous les modaux, vous pouvez modifier l'option "backdrop" dans l'objet options d'initialisation modale. En le définissant sur « statique », vous empêchez le modal de se fermer lorsque vous cliquez en dehors de ses limites.

Désactivation modale spécifique

Si vous souhaitez désactiver sélectivement la fermeture modale pour modaux spécifiques, vous pouvez utiliser soit JavaScript, soit des attributs de données.

Utilisation JavaScript :

$('#myModal').modal({backdrop: 'static', keyboard: false})

Utilisation des attributs de données :

<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
</button>

En ajoutant l'attribut data-backdrop="static", vous désactivez l'attribut "backdrop ". De plus, l'attribut data-keyboard="false" empêche la fermeture du modal en appuyant sur la touche "Esc".

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn