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
Libérer: 2024-11-13 02:03:02
original
913 Les gens l'ont consulté

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})
Copier après la connexion

Utilisation des attributs de données :

<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
</button>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal